当鼠标/光标点击弹出窗口时，如何做无效和活动背景弹出

我有HTML页面上的按钮。当我点击它时，我会显示一个弹出窗口。当我这样做时，我需要禁用背景或灰色背景，除了我打开的弹出窗口。当鼠标/光标点击此弹出框时，所有内容都应该正常（启用所有内容）并弹出关闭。当鼠标/光标点击弹出窗口时，如何做无效和活动背景弹出

我使用下面的代码：

<a href="#" id="showModal" class="btn btn-success" ><i class="icon-map-marker" style="color: #fff;"></i>&nbsp;Select Region</a> 

<script type="text/javascript"> 


     window.onload = function() { 

      var modal = new RModal(document.getElementById('modal'), { 
       //content: 'Abracadabra' 
       beforeOpen: function(next) { 
        console.log('beforeOpen'); 
        next(); 
       } 
       , afterOpen: function() { 
        console.log('opened'); 
       } 

       , beforeClose: function(next) { 
        console.log('beforeClose'); 
        next(); 
       } 
       , afterClose: function() { 
        console.log('closed'); 
       } 
       // , bodyClass: 'modal-open' 
       // , dialogClass: 'modal-dialog modal-dialog-lg' 
       // , dialogOpenClass: 'animated fadeIn' 
       // , dialogCloseClass: 'animated fadeOut' 

       // , focus: true 
       // , focusElements: ['input.form-control', 'textarea', 'button.btn-primary'] 

       // , escapeClose: true 
      }); 

      document.addEventListener('keydown', function(ev) { 
       modal.keydown(ev); 
      }, false); 

      document.getElementById('showModal').addEventListener("click", function(ev) { 
       ev.preventDefault(); 
       modal.open(); 
      }, false); 

      window.modal = modal; 
     } 
    </script>

来源

2016-08-25 Ramesh vemula

绝对定位弹出占据整个页面，并与小于1个不透明给它ablack背景，所以你得到的透视效果。然后在文档中添加一个点击处理程序，检查点击的元素是否是弹出元素的子元素。 – Shilly

请尽快回复查询其非常紧急。 –

你好shilly我不能得到你的answr你可以plz发送代码 –

可以绑定一个eventListener到身体每一个模态打开时，调用modal.close方法。

的afterOpen方法是这样的：

afterOpen: function() { 
    console.log('opened'); 
    document.body.addEventListener("click", closeModal, false); 
}

然后closeModal功能已经从body.click事件退订：

function closeModal(ev) { 
    ev.preventDefault(); 
    modal.close(); 
    document.body.removeEventListener('click', closeModal, false); 
}

来源

2016-08-25 09:56:00 Laszlo

这将在用户点击内容时关闭模式。 – Shilly

是的，你是对的！模态上的'stopPropagation'会解决它。 – Laszlo

我从来没有与RModal工作，所以我不不知道它的API。你可以逆向工程这个基本的例子：

重要的部分是使用node.contains()来检查点击的项目是否在模态之外，否则你将隐藏在每次点击模态。 CSS就在那里给你变黑的背景效果。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
     #wrapper { 
      background-color: rgba(0,0,0,0.5); 
      display: none; 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
     } 
     #wrapper.active { 
      display: block; 
     } 
     #popup { 
      background-color: red; 
      border: 1px solid black; 
      margin: 20% auto; 
      padding: 20px; 
      width: 20%; 
     } 
    </style> 
</head> 
<body> 
<button>show popup</button> 
<div id="wrapper"> 
    <div id="popup">POPUP</div> 
</div> 
<script> 
var wrapper = document.querySelector('#wrapper'), 
    popup = document.querySelector('#popup'), 
    checkHidePopup = function checkHidePopup(event) { 
     if (!popup.contains(event.target)) { 
      wrapper.className = ''; 
      wrapper.removeEventListener('click', checkHidePopup, false); 
     } 
    }; 
document.querySelector('button').addEventListener('click', function(event) { 
    wrapper.className = 'active'; 
    wrapper.addEventListener('click', checkHidePopup, false); 
}); 
</script> 
</body> 
</html>

来源

2016-08-25 10:11:59 Shilly

这里是我的回答：

<script type="text/javascript"> 


     window.onload = function() { 

      var modal = new RModal(document.getElementById('modal'), { 
       //content: 'Abracadabra' 
       beforeOpen: function(next) { 
        console.log('beforeOpen'); 
        next(); 
       } 
       , afterOpen: function() { 
        console.log('opened'); 
       } 

       , beforeClose: function(next) { 
        console.log('beforeClose'); 
        next(); 
       } 
       , afterClose: function() { 
        console.log('closed'); 
       } 
       // , bodyClass: 'modal-open' 
       // , dialogClass: 'modal-dialog modal-dialog-lg' 
       // , dialogOpenClass: 'animated fadeIn' 
       // , dialogCloseClass: 'animated fadeOut' 

       // , focus: true 
       // , focusElements: ['input.form-control', 'textarea', 'button.btn-primary'] 

       // , escapeClose: true 
      }); 

      document.addEventListener('keydown', function(ev) { 
       modal.keydown(ev); 
      }, false); 

      document.getElementById('showModal').addEventListener("click", function(ev) { 
       ev.preventDefault(); 
       modal.open(); 
      }, false); 

      window.modal = modal; 

      document.getElementById('modal').addEventListener("click", function(ev) { 
       ev.preventDefault(); 
       modal.close(); 
      }, false); 

      document.getElementsByClassName("modal-content")[0].addEventListener("click", function(ev) { 
       ev.preventDefault(); 
       ev.stopPropagation(); 

      }, false); 
     } 
    </script>

来源

2016-08-25 10:42:36

这里是工作示例 http://plnkr.co/edit/rKnsIfE847Fau6RVQ22K?p=preview –

我有一个更多的查询...对于上述相同的代码，你可以请帮我解决..在页面上弹出将显示当我点击的页面，包括弹出页面不会被启用 –

如果它适合你首先接受我的答案:) 所以，现在你想隐藏页面后弹出（模态）页面加载，然后你想正常的行为？ right –

当鼠标/光标点击弹出窗口时，如何做无效和活动背景弹出

回答

相关问题