Geek asks and answers

Display modal DIV on darkened page

I have a page where users fill out a form. Several text fields, drop-down lists and flags, etc.

When the user clicks on a specific text field on the page, I need to darken the screen and open a dialog box with a list of checkboxes and the "OK" and "Cancel" buttons. When the user clicks the “OK” button, he will accept the text values ​​from the checked flags, close the pop-up window, illuminate the main page again and write the text of the flag in the text field that was clicked in the format of a line separated by commas.

The biggest problem I encountered is the modal popup div code. I am sure that I can perfectly understand the functionality of checkbox / textbox, but I was not able to get the popup to work correctly.

Does anyone have an easy way to do this? Currently, before I start messing around with this, I just have a simple form with all the input controls.

+5
source share
3 answers

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

The easiest way to do this is to use the jQuery UI. It has a Dialog interface, which is very convenient and easy to implement.

If, on the other hand, you prefer to do it manually, then this is a different story:

  • DIV, (: ), . . , (set display: none)

  • DIV, . , .

  • Javascript ( jQuery ), DIV, DIV, .

+3

jquery ui . , .

, - "opensModal" - , . , - "" . , / . :

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);
})();

: http://jsfiddle.net/2edPZ/3/

0

More articles:


All Articles