How to do popup with inactive and active background when mouse/cursor click out of popup

Question

I have button on HTML page. When I click on it, I display a popup. When I do that I need to disable the background or gray out background except the popup I have opened. When mouse/cursor clicks out of this popup, everything should come to normal (enable everything) and popup closes.

I am using below code:

<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

Here is my answer:

<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

I've never worked with RModal, so I don't know its API. You can reverse engineer this basic example:

The important part is using node.contains() to check if the item clicked on is outside the modal, else you'll hide the modal on every click. The css is just there to give you the blackened background effect.

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

Answer 3

You can bind an eventListener to the body each time the modal opens, that calls the modal.close method.

The afterOpen method will look like this:

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

Then the closeModal function has to unsubscribe from the body.click event:

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