Display modal DIV over darkened page

Question

I have a page where users fill out a form. Multiple textboxes, dropdowns and checkboxes, etc.

When the user clicks on a particular textbox within the page, I need to darken the screen and pop up a dialog with a list of checkboxes and OK and Cancel buttons. When the user clicks OK, it will take the text values from the checked checkboxes, close the pop up, lighten the main page again and write the checkbox text to the textbox that was clicked, in comma-separated string format.

The biggest issue I'm having is with the modal popup div code. I'm sure I can figure out the checkbox/textbox functionality just fine, but I've been unable to get the popup working correctly.

Does anyone have any simple way of doing this? Currently, before I started messing with this, I just have a simple form with all the input controls.

[jQuery UI](http://jqueryui.com) is a library on top of jQuery. Not sure if that's what you meant or not there. It has a modal dialog. Post whatever code you do have, even if it doesn't work, if you want people to help. — Jared Farrish, Mar 27 '13 at 14:50

score 3 · Answer 1 · answered Mar 27 '13 at 14:48

The easiest way to do this is by using jQuery UI. It has a "Dialog" interface which is pretty handy and easy to implement.

If on the other hand you'd rather doing it by hand, then that's a different story:

Create a DIV that it's just a black fixed box (position: fixed) that would cover the page. This will be your background. Make sure it's not visible at first (set display: none)
Make another fixed DIV that would display your dialog. Style it so that your dialog will be displayed at the center of your browser window.
Using Javascript (or jQuery for extra effects), make both your black DIV and dialog DIV appear when your button is clicked.

score 0 · Accepted Answer · answered Mar 27 '13 at 14:55

Use the Modal dialog as shown here:

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
  resizable: false,
  height:140,
  modal: true,
  buttons: {
    "Delete all items": function() {
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});
});
</script>
</head>
<body>

<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;">    
</span>These items will be permanently deleted and cannot be recovered. Are you sure?   </p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>

Thanks, This worked great! Now how can I set the "OK" button to write data to the textbox that was clicked, based on checked checkbox text? — Mark Highfield, Mar 27 '13 at 15:39
Like this http://jsfiddle.net/Cyberjetx/QGuz8/ part of the answer came from http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery — Joe Johnston, Mar 28 '13 at 15:49

João Paulo Macedo · Answer 3 · 2013-03-27T15:03:02.303

You may not want to add the whole jquery ui library just for this purpose. If I'm right here's, how you'd do it.

So, when you 'focus' that input - lets call it 'opensModal' - you want the modal to open. It's pretty simple, and self explanatory - despite the "long" code. Actually, most of it is just there to make the modal/modal appearance prettier. Here we go:

HTML:

<!-- the input -->
<input class="opensModal" type="text" />

<!-- the modal and its overlay -->
<div class="modalOverlay is-inactive">
    <div class="modal">
        <input type="checkbox" />
        <input type="checkbox" />
        <button>Ok</button>
        <button>Cancel</button>
    </div>
</div>

CSS:

.modalOverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: 0.6s;
}

.modalOverlay.is-inactive {
    visibility: hidden;
    background: rgba(0, 0, 0, 0);
}

.modalOverlay.is-active {
    visibility: visible;
    background: rgba(0, 0, 0, 0.4);
}

.modal {
    margin: 100px auto;
    background: #fff;
    width: 100px;
    padding: 20px;
    -webkit-transition: 0.4s 0.6s;
}

.modalOverlay.is-inactive .modal {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.1);
}

.modalOverlay.is-active .modal {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
}

JQUERY(javascript)

(function () {
    var $modal = $('.modalOverlay'),
        openModal = function () {
           $modal
               .removeClass('is-inactive')
               .addClass('is-active');
        },
        closeModal = function () { //use it wherever you want
            $modal
               .removeClass('is-active')
               .addClass('is-inactive');
        },
        onDocReady = function () {
            $('.opensModal').on('focus', openModal);
        };

    $(onDocReady);
})();

Here's a fiddle: http://jsfiddle.net/2edPZ/3/

Display modal DIV over darkened page

3 Answers3