如何從外部關閉非模式覆蓋對話框

我希望能夠使用外部按鈕來切換覆蓋對話框。問題是當覆蓋對話框打開時，它阻止鼠標訪問按鈕。是否可以模仿Bootstrap模態響應而不使用其數據類？是否有可能使用CSS，jQuery或javaScript來解決這種模式行爲？下面是代碼：如何從外部關閉非模式覆蓋對話框

<!DOCTYPE html> 
<html> 
<head> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<style> 
    .nonmodals { 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     z-index: 10000; 
    } 
</style> 
</head> 
<body onload="HideModals()"> 
<a type="button" onclick="ToggleReserve()" class="btn btn-primary">Toggle Overlay</a> 
<div id="reserveform" class="nonmodals" role="dialog"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times; </button> 
     <h4 class="modal-title">The Header</h4> 
    </div> 
    <div class="modal-body"> 
    <div> 
     <h3>Hello!</h3> 
     <form class="form-horizontal" role="form"> 
      <div class="form-group"> 
       <div class="col-sm-offset-2"> 
        <button type="submit" class="btn btn- primary">Submit</button> 
       </div> 
      </div> 
     </form> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
<script src="js/bootstrap.min.js"></script> 
<script> 
    function ToggleReserve() { 
     $("#reserveform").toggle(500); 
    }     
    function HideModals() { 
     $('.nonmodals').css('display', 'none'); 
    }  
    </script> 
</body> 
</html>

來源

2015-11-20 Ash

不知道你爲什麼會想這樣做，但你可以用它來做到這一點的CSS是

pointer-events: none;

將它添加到你的「備用形式」分區。任何鼠標點擊都會經過div到下面的東西。如果你需要一些點擊不會經過，你將不得不重新設置這些元素的指針事件樣式。

來源

2015-11-20 01:56:41

謝謝，它的工作原理！ – Ash

如何從外部關閉非模式覆蓋對話框

回答

相關問題