Question

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

Answer 1

以下是我的回答：

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

Answer 2

每次模态打开时，您都可以将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);
}

Answer 3

我从未使用过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>

当鼠标/光标单击弹出窗口时，如何使用非活动和活动背景弹出窗口

3 个答案: