我知道这已被问了很多,但我找不到解决问题的方法,所以这里是:我的模态在点击时不出现。我的代码是:
$(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>
答案 0 :(得分:0)
请看这里有效:
您需要添加
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>
答案 1 :(得分:0)
您需要停止冒充onClick按钮事件。你可以简单地返回false。 Here你可以找到一篇关于冒泡和捕捉的好文章。
import PlaygroundSupport
PlaygroundPage.current.needsIndefiniteExecution = true