當主容器上有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