当主容器上有data-dismiss ='modal'并且按下按钮以展开内部面板时，如何保持模式不关闭

Question

所以主要的模态内容从这里开始：

<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">

面板位于上述容器内，然后引发数据删除：

<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>

如果我打开其中一个面板，我希望能够停止触发数据删除。

Answer 1

更新！ 这是您的操作方式。 我将制造一个小提琴。

<!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>

当主容器上有data-dismiss ='modal'并且按下按钮以展开内部面板时，如何保持模式不关闭

问题描述

1 个解决方案

解决方案1
0 2017-06-12 16:55:34

当主容器上有data-dismiss =&#39;modal&#39;并且按下按钮以展开内部面板时，如何保持模式不关闭

问题描述

1 个解决方案

解决方案1 0 2017-06-12 16:55:34

当主容器上有data-dismiss ='modal'并且按下按钮以展开内部面板时，如何保持模式不关闭

解决方案1
0 2017-06-12 16:55:34