2017-06-12 2 views
0

内のパネルを拡大するために押されているときにメインモーダルコンテンツがここに開始したときに閉じてからモーダルを保つことができます。どのように私はそこに本体容器に=「モーダル」データ・解任とボタンが

<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"> 
私は、パネルの1を開く場合は発射から-解任データを止めることができるようにしたい

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

とパネルは、データ・解雇をオフに設定し、上記容器の内部にあります。

+0

https://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing – AntonZlatkov

答えて

0

UPDATED!あなたのやり方は次のとおりです。私はフィドルを作成します。

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

@AtikP https://jsfiddle.net/kblau237/my77b7jL/ – kblau

+0

非常にありがとうございました私のためにそれをすることは、無駄なく年を重ねてみることでした。ポップアップは私がid = "collapse1"を持っていたdivの下で働いていた – AtikP

+0

私はこの機能を試してみましたが、残念ながらこれも私が達成しようとしていたものではありません。この関数は、モーダルを破棄することをすべて停止します。しかし、私は、ポップアップ・タブが押された場合にのみモーダルが閉じないようにする解決策を必要とし、残りのモーダルが押された場合は閉じなければなりません。 – AtikP

関連する問題