单击按钮时不显示模态

Question

我知道这已被问了很多，但我找不到解决问题的方法，所以这里是：我的模态在点击时不出现。我的代码是：

$(document).ready(function() {
  $("#modalBtn").click(function() {
    $(".modal").fadeIn();
    $(".modal_main").show();
  });
});

$(document).ready(function() {
  $("body").click(function() {
    $(".modal").fadeOut();
    $(".modal_main").fadeOut();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" />

<button class="btn btn-success" id="modalBtn">Uploads</button>
<div class="modal">
  <div class="modal_content"></div>
  <div class="modal_main">
    <h1 class="modalUpload">Uploads</h1>
    <hr class="modalLine">
    <div class="updates col-md-12">
    </div>
  </div>
</div>

Answer 1

请看这里有效：

您需要添加

event.preventDefault();
event.stopPropagation();

按钮中的

。如果你不这样做：如果你点击按钮，你也点击身体......

$(document).ready(function(){
    $("#modalBtn").click(function(event){
        event.preventDefault();
        event.stopPropagation();
        console.log('clicked modal button');
        $(".modal").fadeIn();
        $(".modal_main").show();
    });
});

$(document).ready(function(){
    $("body").click(function(){
        console.log('clicked body');
        $(".modal").fadeOut();
        $(".modal_main").fadeOut();
    });
});

.modal {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success" id="modalBtn">Uploads</button>

<div class="modal">
    <div class="modal_content"></div>
    <div class="modal_main">
    <h1 class="modalUpload">Uploads</h1>
    <hr class="modalLine">
        <div class="updates col-md-12">

        </div>
    </div>
</div>

接下来是您的代码无法正常工作：问题是您点击了按钮而且还在机身上...查看控制台日志

$(document).ready(function(){
    $("#modalBtn").click(function(event){
        console.log('clicked modal button');
        $(".modal").fadeIn();
        $(".modal_main").show();
    });
});

$(document).ready(function(){
    $("body").click(function(){
        console.log('clicked body');
        $(".modal").fadeOut();
        $(".modal_main").fadeOut();
    });
});

.modal {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success" id="modalBtn">Uploads</button>

<div class="modal">
    <div class="modal_content"></div>
    <div class="modal_main">
    <h1 class="modalUpload">Uploads</h1>
    <hr class="modalLine">
        <div class="updates col-md-12">

        </div>
    </div>
</div>

Answer 2

您需要停止冒充onClick按钮事件。你可以简单地返回false。 Here你可以找到一篇关于冒泡和捕捉的好文章。

import PlaygroundSupport
PlaygroundPage.current.needsIndefiniteExecution = true