单击按钮后如何关闭弹出模式 [英] How to close popup modal after button click
本文介绍了单击按钮后如何关闭弹出模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在选中复选框然后单击按钮之后，如何关闭弹出模式?
How to close popup modal after the checkbox is checked and then the button is clicked?
如果未选中该复选框，则不关闭模式.复选框和按钮置于模式内.当我选中复选框并单击按钮时，模式不会关闭.
If checkbox is not checked then not to close modal. Checkbox and button placed inside modal. When I checking the checkbox and clicking the button modal is not closing.
$(document).ready(function(){
$('.one:checked').on('click' , '.close_model' , function(){
dialog('close');
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<button type="button" class="close_model btn btn-danger">button</button>
<input type="checkbox" name="ch" class="one">
<input type="checkbox" name="ch" class="one">
<input type="checkbox" name="ch" class="one">
<input type="checkbox" name="ch" class="one">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
推荐答案
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="hidden" name="txt1" id="textbox1">
<button type="button" class="close_model btn btn-danger">button</button>
<input type="checkbox" name="ch" class="one" value="1">
<input type="checkbox" name="ch" class="one" value="2">
<input type="checkbox" name="ch" class="one" value="3">
<input type="checkbox" name="ch" class="one" value="4">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".close_model").on("click",function(){
if($('#textbox1').val() == 'true'){
$('.close').trigger('click');
}else{
alert('pls click on checkbox');
}
});
$('.one').change(function() {
if(this.checked) {
$(this).prop("checked", 'true');
}
$('#textbox1').val(this.checked);
});
});
</script>
</body>
</html>
这篇关于单击按钮后如何关闭弹出模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
