modal-dialog

I've been working on an ASP.net project that uses custom 'modal dialogs'. I use scare quotes here because I understand that the 'modal dialog' is simply a div in my html document that is set to appear "on top" of the rest of the document and is not a modal dialog in the true sense of the word. In many parts of the web site, I have code that looks like this: var warning = 'Are you sure you want to do this?'; if (confirm(warning)) { // Do something } else { // Do something else } This is okay, but it would be nice to make the confirm dialog match the style of the rest of the page. However, since

I have the following div: <div id="divAlert"> <div id='divAlertText'>You must select a language.</div> <div id='divAlertButton' class='btn blue' onclick="HideAlert();">Ok</div> </div> Is this HTML page there are more divs and buttons. I want to show divAlert as a modal pop up. I know there is something in jQuery, I think, that I can use to show my div with a half transparent black background filling the entire page. But I can't remember its name. Any advice? you can use jquery dialog widget http://jqueryui.com/demos/dialog/ A simple modal pop up div or dialog box can be done by CSS properties

I am trying to use a modal as a popup help window. I set backdrop to 'nothing'. When the modal is opened (without backdrop) input fields in 'original' page cannot be focused. Other input types (checkbox and button in example) work well... Any idea ? My code: <div class="container"> <!-- Button to trigger modal --> <form> <label>Input</label> <input type="text" placeholder="Type something…"> <label class="checkbox"> <input type="checkbox">Checkbox </label> <button type="submit" class="btn">Submit</button> </form> <!-- Button to trigger modal --> <a href="#myModal" role="button" class="btn" data

I've been using Simple Modal and i feel it doesn't live up to what i need at the moment. Is there a Modal Box that supports loading external files and allows those external files to close the modal box and redirect the parent page to some url. An example of what i want to do. You have a list of users, you could click "Add user" and a Modal Box with the form pops up, you fill that in and submit it. That would close the box and reload the user list page so you would see the user in the list. Then you could click "Edit user" and a Modal Box with the user info filled in the form fields would pop

I'm having a problem with embedding a Google Map via the v3 API in a modal box. Grey boxes appear in the map canvas when the modal is shown. Resizing the browser window, bringing up Web Inspector, etc. makes all map tiles visible, i.e. it "force re-render" the map. The parent element of the map element ( section#map-modal , see code below) has display: none set in its CSS on page load. The JS modal code automatically sets display: block when the show button is clicked. If I temporarily remove display: none from the modal element, the map renders correctly on page refresh. Isn't the Google Map

Is there a default option to close a jQuery dialog by clicking somewhere on the screen instead of the close icon? Edit: Here's a plugin I authored that extends the jQuery UI Dialog to include closing when clicking outside plus other features: https://github.com/jasonday/jQuery-UI-Dialog-extended Here are 3 methods to close a jquery UI dialog when clicking outside popin: If the dialog is modal/has background overlay: http://jsfiddle.net/jasonday/6FGqN/ jQuery(document).ready(function() { jQuery("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 100, modal: true, open: function() {