[英]how can i keep a modal from closing when there is a data-dismiss='modal' on the main container and when a button is pressed to expand panels inside
so the main modal content starts here: 所以主要的模态内容从这里开始:
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container" data-dismiss="modal">
and the panel is inside the above container which then sets off the data-dismiss: 面板位于上述容器内,然后引发数据删除:
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsable Panel Title</a>
</h4>
</div>
I want to be able to stop the data-dismiss from firing if I open up one of the panels. 如果我打开其中一个面板,我希望能够停止触发数据删除。
UPDATED! 更新! Here is how you do it.
这是您的操作方式。 I will create a fiddle.
我将制造一个小提琴。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index2005</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function (event) {
$("#portfolioModal1").addClass("collapse in");
event.stopPropagation();
})
$("#portfolioModal1").click(function (event) {
if (event.target.id == "portfolioModal1") {
$("#portfolioModal1").removeClass("collapse in");
}
});
})
</script>
</head>
<body>
<button style="margin-bottom: 20px;" class="btn btn-default" data-toggle="modal"
data-target="#portfolioModal1">
Click Me
</button>
Click anywhere outside the MODAL to close - standard behavior of rmoving a modal is by adding a button to modal or click outside of MODAL
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container" data-dismiss="modal">
<a id="PanelOpener" data-toggle="collapse" href="#collapse1" data-target="#showHide" />
Click to hide/show panel<a />
<div id="showHide" class="panel-group collapse">
<div class="panel panel-primary" style="width:200px">
<div class="panel-heading">
<h4 class="panel-title">
A Heading
</h4>
More content..
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.