SimpleModal

v1.2.3

Deprecated: please see the current version.

Archives: SimpleModal v1.1.1 | SimpleModal v1.0.1

Summary

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided.

Demos

Tests / Examples

Download

Support

Usage

As a jQuery chained function, where data is a jQuery object:

data.modal({options});
Examples:
$('<div>my data</div>').modal({options});
$('#myDiv').modal({options});
jQueryObject.modal({options});

As a stand-alone jQuery function, where data is a jQuery object, a DOM element, or a plain string (which can contain HTML):

$.modal(data, {options});
Examples:
$.modal('<div>my data</div>', {options});
$.modal('my data', {options});
$.modal($('#myDiv'), {options});
$.modal(jQueryObject, {options});
$.modal(document.getElementById('myDiv'), {options});

Styling

  • New in 1.2, you have the option to use external CSS or to pass in CSS attributes for the modal overlay, container, and data elements as options. The options are: overlayCss, containerCss and dataCss and take a key/value object of properties. See the jQuery CSS Docs for details.
  • SimpleModal internally handles the setting of the critical CSS properties, to prevent having to manually define them. Now in 1.2, SimpleModal dynamically centers the modal dialog and also adds a position option, for manual positioning.
  • SimpleModal internally defines the following CSS classes:
    • simplemodal-overlay: (previously modalOverlay) used to style the overlay div – helpful for applying common styles to different modal dialogs
    • simplemodal-container: (previously modalContainer) used to style the container div – helpful for applying common styles to different modal dialogs
    • simplemodal-data: (previously modalData) used to style the data element – helpful for applying common styles to different modal dialogs
    • modalCloseImg: used to style the built-in close icon (part of the closeHTML option, so this class is not changable)
Example: Applying CSS directly via the options

* Note: because modalCloseImg is not an actual element, you’d still need to use external CSS to style it

data.modal({
  overlayCss: {
    backgroundColor: '#000',
    cursor: 'wait'
  },
  containerCss: {
    height: 400,
    width: 600,
    backgroundColor: '#fff',
    border: '3px solid #ccc'
  }
});
Example: Applying CSS via an external stylesheet
#simplemodal-overlay {
  background-color:#000;
  cursor:wait;
}

#simplemodal-container {
  height:400px; 
  width:600px; 
  background-color:#fff; 
  border:3px solid #ccc;
}

#simplemodal-container a.modalCloseImg {
  background:url(../img/x.png) no-repeat; 
  width:25px; 
  height:29px; 
  display:inline; 
  z-index:3200; 
  position:absolute; 
  top:-14px; 
  right:-18px; 
  cursor:pointer;
}
  • For IE 6, the following will handle the PNG used for a.modalCloseImg:
<!--[if lt IE 7]>
<style type='text/css'>
  #simplemodal-container a.modalCloseImg{
    background:none; 
	right:-14px; 
	width:22px; 
	height:26px; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/x.png', sizingMethod='scale'
      );
  }
</style>
<![endif]-->

Options

Both of the SimpleModal modal() functions accept an optional options object, which can contain any/all of the following (default value):

  • iframe: [DEPRECATED in 1.2.2]
    Update your object and embed elements with the wmode property.
  • overlay: [DEPRECATED in 1.2]
    See opactiy, below
  • opacity: (50) [renamed from overlay in 1.2]
    The opacity value, from 0 – 100. 0 = transparent 100 = opaque
  • overlayId: (‘simplemodal-overlay’)
    The DOM element id for the overlay div
  • overlayCss: ({})
    The CSS styling for the overlay div
  • containerId: (‘simplemodal-container’)
    The DOM element id for the container div
  • containerCss: ({})
    The CSS styling for the container div
  • dataCss: ({})
    The CSS styling for the data div
  • zIndex: (1000) [new in 1.2]
    Starting z-index value
  • close: (true)
    Show the code in the closeHTML option (below)?
  • closeTitle: [DEPRECATED in 1.2]
    See closeHTML, below
  • closeHTML: (‘<a class=”modalCloseImg” title=”Close”></a>’)
    [new in 1.2] – The HTML for the default close link. SimpleModal will automatically add the closeClass to this element.
  • closeClass: (‘simplemodal-close’)
    The CSS class used to bind to the close event
  • position: (null) [new in 1.2]
    Position of container [top, left]. Can be number of pixels or percentage. If not set, SimpleModal will center the container. To only set one value, leave the other blank. For example: [top,] or [,left].
  • persist: (false)
    Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls, if false, the data will be reverted to its original state
  • onOpen: (null)
    The callback function called in place of SimpleModal’s open function
  • onShow: (null)
    The callback function called after the modal dialog has opened
  • onClose: (null)
    The callback function called in place of SimpleModal’s close function

Callbacks

The callback functions are called using the JavaScript apply function. One parameter, the dialog object, is sent, which contains the overlay, container, data and iframe objects. In addition, inside the callback, this will refer to the SimpleModal object, which will allow you to access all of the available modal elements and functions.

  • onOpen: Useful for adding effects to the opening of the modal dialog elements. Your callback function will be passed an object that contains the overlay, container, data, and iframe elements. SimpleModal will handle “showing” the iframe, if necessary.
Example
data.modal({onOpen: function (dialog) {
  dialog.overlay.fadeIn('slow', function () {
    dialog.container.slideDown('slow', function () {
      dialog.data.fadeIn('slow');
    });
  });
}});
  • onShow: Useful for binding events or any other actions you might want to perform after the modal dialog elements have been displayed. Your callback function will be passed an object that contains the overlay, container, data, and iframe elements. If you are including another plugin (TinyMCE, DatePicker, etc.) in a modal dialog, this is where you want to initialze that plugin.
  • onClose: Useful for adding effects to the closing of the modal dialog elements. Your callback function will be passed an object that contains the overlay, container, data, and iframe elements. After you’ve applied effects, etc., you’ll need to call $.modal.close(); so SimpleModal can re-insert the data correctly and clean up the dialog elements.
Example
data.modal({onClose: function (dialog) {
  dialog.data.fadeOut('slow', function () {
    dialog.container.slideUp('slow', function () {
      dialog.overlay.fadeOut('slow', function () {
        $.modal.close(); // must call this!
      });
    });
  });
}});

Other Notes

Default Values
  • If you have a value that you want to be used for all modal dialogs, instead of passing the option in for each one, you can globally modify the defaults.
Example – Single Property
$.modal.defaults.closeClass = "modalClose";
Example – Multiple Properties
$.extend($.modal.defaults, {
	closeClass: "modalClose",
	closeHTML: "<a href='#'>Close</a>"
});
Data CSS Display Property
  • SimpleModal “hides” the data when it adds it to the modal dialog. If you use an onOpen callback, the dialog.data display value will have been set to none and you’ll need to explicitly “un-hide” the element.
Cloning and Element Removal
  • By default, SimpleModal will clone the data element that you pass in. When the dialog is closed, the cloned, unchanged, data element will be re-inserted into DOM in its original place. If the persist option is true, SimpleModal will “re-insert” the original element, with changes intact. If you use an onClose callback, you’ll need to call $.modal.close(); (see the onClose in the Callback section above).
  • SimpleModal always removes the overlay, container and iframe elements when closed. If you use an onClose callback, you’ll need to call $.modal.close(); (see the onClose in the Callback section above)
Known Issues
  • In IE6, the state of checkboxes and radio buttons are not maintained using the persist option.
  • In IE7, the state of radio buttons is not maintained using the persist option.
  • To prevent Flash objects from “bleeding through” the dialog, make sure to set the wmode property for your object and embed elements to either opaque or transparent (reference).
Browser Compatibility

SimpleModal has been tested in the following browsers:

  • IE 6, 7
  • Firefox 2, 3
  • Opera 9
  • Safari 3

Changes in 1.2

* From ChangeLog.txt

  • Added new internal variables (ie6, ieQuirks and w)
  • Added better IE6 detection (preventing false positives with IE7)
  • Fixed $.modal.close() function to correctly utilize an onClose callback without causing a infinite recursion crash
  • Added new options (dataCss, zIndex, closeHTML and position)
  • Renamed overlay option to opacity
  • Removed closeTitle option
  • Renamed default class and id names from modalXxx to simplemodal-xxx
  • Added better z-index handling – initial value can be defined through the options
  • Fixed element creation to be XHTML compliant
  • Added window dimension detection
  • Fixed Safari issue (directly setting display:’none’ as opposed to using .hide())
  • Changed width/height setting for overlay and iframe
  • Fixed IE7 positioning issue in quirks mode
  • Added IE6 expression for elements – eliminating the need for an external stylesheet
  • Added dynamic centering of container as well as a position option for manual positioning
  • Added namespacing on events
  • Added window resize listener to resize dialog elements
  • Updated demo and test/example pages

Upgrading

Things to be aware of when upgrading to 1.2 from a previous version:

  • If you used the overlay option, you’ll need to rename it to opacity
  • If you used the closeTitle option, you’ll need to now use the closeHTML option instead
  • Remove the container positioning CSS from your stylesheet (remove the top, left, and margin-left properties)
  • Remove any IE specific container positioning CSS
  • Overlay, container and data class and id names changed! Update your code/CSS or use the overlayId and containerId options to have SimpleModal to use the old id names.
  • closeClass option value changed! Update your code or use the closeClass option to have SimpleModal to use the old class name (modalClose).

The following option overrides should help with backwards compatibility, although you’ll still have to update your CSS. Place this somewhere after you include SimpleModal but before you create a modal dialog:

$.extend($.modal.defaults, {
  closeClass: "modalClose",
  overlayId: "modalOverlay",
  containerId: "modalContainer"
});

220 thoughts on “SimpleModal”

  1. Paulo de Tarso

    Hi Eric!

    Thanks for the last answer, so, you told me:

    “You have the option to override the id’s being used, or you could just add the miniBox class to the element you are displaying”.

    How can I do this? Sorry if this is a basic question, but, I’m not getting.

    Where I can change the id that will be used for the script? If you can show me an example working… A page with two or three modal box with differents id’s…

    Can you? :-p

  2. Eric Martin

    @abrar – that’s a loaded question/request 😉 Have you decided how it will function? Have you tried anything?

    @Nima – you can make it work with UI Draggable bu using the onShow callback:

    $(element).modal({
  onShow: function (dialog) {
    dialog.container.draggable({handle: XXX});
  }
});

    You’d want to have an element in your dialog that you could use as the handle, and pass the selector/element as the handle option to the draggable function.

    @Caspar – thanks. I’d still like to see a page (if anyone has one) that demonstrates the issues/bug.

    @Anil – what exactly are you trying to do? If you want to display a page inside the modal, you’ll need to use an iframe.

    $.modal('<iframe src="iframe.html" id="iframeTest" name="iframeTest" height="450" width="830" style="border:0" />');

    @Paulo de Tarso – 

    $(element).modal({containerId: "YOUR_ID"});
  3. Caspar

    I’ve made a little test html:

    It works fine in FF (3.05), IE7 (7.0.5730.13), but not in IE6 (using MultipleIEs..)

    Test site

	div#mainContent {
		background-color: #999;
		width: 70%;
		height: 15%;
	}
	#simplemodal-overlay {
		background-color: #000;
		cursor: wait;
	}
	div#modalContainer {
		background-color: #fff;
		width: 400px;
		height: auto;
		display:none;
		z-index: 10;
		padding: 5px;
		border: 1px solid #f00;
	}

	function showModal() {
		$('#modalContainer').modal({
			close:false, // geen close button
			onOpen:modal.onOpen,
			onShow:modal.onShow,
			onClose:modal.onClose,
			position:['10%',] // alleen top
		});
	}

	jQuery.fn.delay = function(time,func){
		return this.each(function(){
			setTimeout(func,time);
		});
	};

	var modal = {
		message: null,
		onOpen: function (dialog) {
			dialog.overlay.fadeIn(200, function () {
				dialog.container.fadeIn(200, function () {
					dialog.data.fadeIn(400, function () {
						$('#modalContainer form').fadeIn(200, function () {
							$('#modalContainer #modalNaam').focus();
						});
					});
				});
			});
		},
		onClose: function (dialog) {
			dialog.data.fadeOut(200, function () {
				dialog.container.fadeOut(200, function () {
					dialog.overlay.fadeOut(200, function () {
						$.modal.close();
					});
				});
			});
		},
		onShow: function (dialog) {
		}
	};

	The tiny main content div
	
	The modal container div

			Test form
  4. Paulo de Tarso

    Hi again!

    Thanks, now it’s working like I want.

    But I was trying use the Draggable Plugin as you told to Nilma above, and I look that we need change the variable “persist” to true, for the script works correctly when we open the same modal again. And, I have three questions about the Close button:

    1) I would like to change the :hover state for the button, but, only with CSS I can’t, (doesn’t work). I tried like this:

    a.botaoFechar {
    position:absolute;
    top:5px;
    right:3px;
    display:block;
    width:21px;
    height:21px;
    background:url(botaoFechar.gif) 0 0 no-repeat;
    z-index:3200;
    cursor:pointer;
    }
    /*
    Until here, it's working

    The image used to the button contains the two steps in same, where I control the background-position to make the :hover effect, but, doesn't work
    */
    a.botaoFechar { background-position:0 -21px; }

    Where can I change to make this? It’s possible?

    2)I want to create another button inside the modal box that can close the modal and stop the overlay. I saw that I need stop them manually, but I’m not getting. What I need to do? For example, I have a button:
    CarregarHe is inside the modal, and I would like that when I click, he makes the check oh the others inputs, and, if the inputs was filled (this I can do, no problems), I want that close the modal and stop the overlay.
    $('#carregar').click(function(){
    if($('#input').val() == '') {
    alert('Something');
    }
    else {

    [I need to stop them!]

    }
    });

    3) Using the Draggable, when we drag the modal, the Close button doesn’t drag together! He stays stopped (maybe the position:absolute is relative to , and not to the modal). So, how can I say that the Close button is relative to the modal box? Need I change the script?

    Look, I’m learning this language (JS), and I’m using the JQuery that its a really “Hand on the wheel” (in Brazil we say this when something help us very much…), but I know that somethings is easy to do, but I don’t know how to do… Sorry for stupid questions, but I have no alternative but to ask. I even try to change myself, but mostly does not work…

    Thanks for the help!

  5. masa

    Hello Eric,

    I want to put the Basic Modal Dialog more than two in one page.
    Just copy and paste looks doesn’t work.
    How should I do?

    Thank you for a cool tool and a Happy New Year.

  6. Pingback: yakuter » SimpleModal - jQuery Mesaj Kutusu

  7. peppetto

    Hi Eric,
    Is it possible to set the height of modal window to auto.
    I have dynamic content coming from MySql database and I don’t know how long the text will be.

    Thanx in advance

  8. Caspar

    @peppetto

    I used an auto height for my example/website as following:

    div#modalContainer {
background-color: #fff;
width: 400px;
height: auto;
display: none;
z-index: 10;
padding: 5px;
border: 1px solid #f00;
}

    It seems to work just fine like this, as far as I could see.

  9. Pingback: User Experience and target="_blank" | .eduGuru

  10. Pingback: 75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine

  11. Eric Martin

    @Caspar – I’ll take a look at your test and get back to you.

    @Paulo de Tarso –

    1) Shouldn’t your CSS look like a.botaoFechar:hover { background-position:0 -21px; }

    2) In the onShow function, bind the button to do your validation. Then, based on your logic, when you want to close the dialog, just call $.modal.close();

    3) Do you have an example I can see?

    I don’t mind the questions – always glad to help when I can. As long as you don’t mind the occasional delay in my response 😉

    @masa – Happy New Year to you too. What exactly are you trying to do? Is it the same content triggered from two different places, or different content? You can have as many modal dialogs per page as you like…

    @peppetto – did Caspar’s suggestion help?

  13. Danny

    Hey,

    Thanks for this.
    I have been struggling a bit with the other dialog versions (in the UI library, and the interface plugin).
    Yours look like what I need, and I like the download package that comes with all needed elements.

  14. George

    Hi,
    How about the release multiple dialog version.Hope this will support feasibility of having multiple modals.If it would be possible to have a modal “stack”, such that one modal could overlay another.if it is possible please help me with an example code.

  15. Danny

    I am trying to add ESC as an access key to the close.
    I wish it was a part of the options, but since it isnt, has anyone done this and can share?

  17. masa

    Hi, Eric

    Actually I’m still struggling with the matter.
    I want put multiple triggers in one page, and each trigger has deferent content.
    Please visit at https://www.japan-blue.com/men's.html, and click >>>.
    This is very beginner’s question, I guess. But I need your advice.
    Tank you, and have a nice weekend.

  18. Jay

    Eric,

    Absolutely love SimpleModal! I have incorporated into a client's custom CMS and am pleased to never have to look at a javascript alert again. I have also implemented it for ajax status displays, but have run into a really strange problem that I can't seem to solve. I can't send a link as it's on a test server, so I'll try to explain the best I can.

    I have 2 different areas causing problems. One is on a drag and drop where when the item is dropped, an ajax call saves the dropped position.

    Here are my modal functions:

    function status() {
    $.modal('<div id="throbber-container"></div>', {
    onOpen: statusOpen,
    close:false,
    opacity: 20,
    overlayId:'throbber-overlay',
    onClose: statusClose
    });
    }

    function statusOpen(throbber) {
    throbber.overlay.fadeIn(200, function () {
    throbber.container.fadeIn(200, function () {});
    });
    }

    function statusClose(throbber) {
    throbber.container.fadeOut(200, function () {});
    throbber.overlay.fadeOut(200, function () {
    $.modal.close();
    });
    }

    And this is my callback function to display the modal:

    ...
    callback: function(){
    status(); <-- Calling the function to initiate the modal
    $.ajax({
    type: "GET",
    url: INTERFACE_URL "/index.php",
    data: 'module=Pages&method=ajax_nestPages' serializeUl($('#page-list'),'&list'),
    success: function(html){
    $.modal.close(); <-- Remove the modal
    }
    });
    }

    The status modal is displayed and removed as expected, but if I click any other area of the page (not even a link) the status displays for about 2 seconds and fades out again. There is no ajax call and I can't figure out why the modal is called.

    The second issue uses the same modal functions, but is called on a list item change function.

    Any help is greatly appreciated, on my way to donate now.

  19. Amit

    Hello,

    Let me first say that I have no clue in javascrips and i’m working
    on my intuition alone.

    I am trying to get the ‘SimpleModalDialog’ to work for multiple ‘s
    so i’ve started by changing all the id properties to class.
    and then i’ve edited the basic.js to:

    $(document).ready(function () {
    $(“div.basicModal”).children(“a.basic”).click(function (e) {
    e.preventDefault();
    var body = $(this).parent().children(“div.basicModelContent”);
    body.modal();
    });
    });

    it now shows the pop-up in more then one but it dosen’t display it’s
    content.

  21. Pingback: AD Lookup Control with Perl and JS - Day 1 | SADev.co.za

  22. Jay

    Problems solved, learning alot! Until I have a complete understanding of AJAx and event binding, I’m thankful for liveQuery.

    Keep up the great development.

  23. Jason

    Back to Edmund’s earliet question, we have a dialog that opens on top of a page and the dialog is dynamic, and it’s possible that it shows taller than the window area, thus putting some of the modal dialog below the bottom of the screen. Without scrolling (since the position is fixed) there is no way to access the lower part of the dialog. Is there a recommended way of handling this with SimpleModal, or is this scenario just unsupported? We cannot put scrollbars on the modal dialog due to design considerations, we must be able to scroll down the page but the fixed positioning prevents this.

  24. Martin

    What am I missing here?
    I love SimpleModal but I have one issue that I can’t figure out. I’m using AJAX to load content into a DIV and display it as a simple modal. In order to limit the requests to the server I would like to only load the content once, but that’s when I run into trouble. Let me show you the code and then I will explain what happens.

    HTML

    <a href="#" class="settings">Settings</a>
    <a href="#" class="test">test</a>
    <div id="content">Default Text</div>

    JavaScript

    $(document).ready(function () {
    $('#sidebar a.settings').click(function (e) {
    e.preventDefault();
    if (!isLoaded) {
    $("#content").load("settings.htm");
    isLoaded = true;
    }
    $("#content").modal();
    });

    $('#sidebar a.test').click(function (e) {
    $("#content").modal();
    });
    });

    function hideModal(){
    $.modal.close();
    }

    The first time I click on the link ‘Settings’ the content from ‘settings.htm’ is correctly displayed as a simple modal. But each time I click on the link after that it will display the DIV’s initial text (Default Text). However, if I remove the following line;

    $("#content").modal();

    from the event handler for the link ‘settings’ and use the ‘test’ link instead it displays correctly each time. I can’t find the reason why this wouldn’t work in the event handler for ‘settings’? I’m pretty new to jQuery so anyone can shed some light on this issue I would really appreciate it.

  25. fsifabio

    Hi,

    i was testing modal in IE6 and it works fine, but when i try to use with these libraries (MicrosoftAjax.js and MicrosoftMvcAjax.js) the modal doesn’t work. Can you help-me?

    Thank`s

    Fabio

  26. Caspar

    @Eric Martin: did you come around running a test with the code I supplied? I’m curious as to what you might’ve found. 🙂

    @Martin: a quick guess: scope issue ?
    the variable isLoaded is inside the click function?
    Only a small change (i have not tested this):


    Settings
    test
    Default Text

    JavaScript

    $(document).ready(function () {
    var isLoaded = false;
    $('#sidebar a.settings').click(function (e) {
    e.preventDefault();
    if (!isLoaded) {
    $("#content").load("settings.htm");
    isLoaded = true;
    }
    $("#content").modal();
    });

    $('#sidebar a.test').click(function (e) {
    $("#content").modal();
    });
    });

    function hideModal(){
    $.modal.close();
    }

  27. dbonneville

    Caspar’s IE6 fix works. I had the same issue. the grey didn’t cover the entire screen, but only covered to where the host page content ended. I added his 2 lines of code. voila. works in IE6.

  28. Martin

    @Caspar: I missed to include the isLoaded variable in my code but it was declared as a global variable outside the click event handler. I also posted my question on the jQuery Google group which Eric replayed to. His suggestion was to use:

    $(“#content”).modal({persist:true});

    Which solved the problem. I appreciate all of your help and your suggestions on this issue.

    – Martin

  29. Eric Martin

    @peppetto – I’m sure it would be possible, I just haven’t tried. Why are you looking for it to be auto height?

    @Danny – cool, thanks for your note. I’m glad you find SimpleModal useful!

    @George – the version that I was working on that supports multiple dialogs can be found in the SVN branches. I haven’t updated it since last November, so I can’t promise anything 😉 I’m hoping to have time in the next month or two to finish the code and refactor it for jQuery 1.3.

    @Danny – the following is what similar to what I had:

    $(document).bind('keydown.simplemodal', function (e) {
    if (e.keyCode == 27) { // ESC
        $.modal.close();
    }
});

    You’d need to make sure to undbind the event or use the one() function instead of bind().

    @masa – if you only want one bind to handle multiple dialogs, you just need to find a way to pass in variables to determine which content to load. You can do this easily with id’s or a variety of other ways.

    @Jay – thank you very much for your donation! Sorry for the delayed response…glad you got it working!

    @Amit – sounds like your body var is not getting the correct content, or the content inside the element is hidden.

    @Jason – I guess there are a couple of options (if content scrollbars are not desired). 1) Bind the ESC key or overlay click to close the dialog or 2) Change the dialog positioning from fixed to absolute.

    @Martin – have you tried the persist:true option?

    @fsifabio – can you let me know what is happening? Do you get JS errors?

    @Caspar – not yet, sorry. I’ll see if I can today and get back to you.

  31. Martin

    I’m back with another question. Is there a way you can prevent SimpleModal from centering the dialog? I know that you can use position: [top, left] but what if I don’t want to use px or % but simply display the div as a modal where it is located on the page?.

    Let see if I can explain this in more detail:
    If I have a DIV with the CSS “z-index:3000;postion:fixed;” but no top or left specified and I use .show() on the div it will inherit it’s position from its parent element but still be displayed on top of the other content. Is it possible to do something similar with SimpleModal or will the default location (center) always kick in? I tried to set the CSS to “postion:fixed;top:inherit;left:inherit;” but that didn’t work. I realize that this is a bit weird case but I’m trying to display a modal dialog right below the link that triggers it.

  32. Martin

    I think I actually figured out a simple solution to my problem. I can use:

    var pos = $().offset();
    $(‘#filter-dialog’).modal({position: [pos.top, pos.left]});

    to get the position of the element. Sorry for posting before thinking things through. But I would love to hear if there is even a better way to do this.

    – Martin

  35. Richard

    I have a cancel button within the modal and I’d like to close the modal without saving the data. How’s the best way to go about this? By default, though, I need to persist the data.

    Thanks!

  37. Richard

    @Eric – Thanks, but that persists the data since I need to open the modal with persists: true.

    $("#modalPicker").modal({ persist: true });

    How can I close the modal without persisting?

  38. masa

    Hello Eric,
    Finally I made it by your advice. The result is exactly what I wanted.
    Thank you again for cool & useful tool!

  40. Victor

    I’m running into a weird error in IE6/7. When I have a within my modal, it loads the first time fine. However, the second load throws an error.

    I can’t seem to figure out why. Just to ensure it’s not my code, I made a copy of your simplemodal-test page and simply added a inside the modal container and the above behavior occurs. Any ideas?

    Thanks for any insight you can provide!

  41. Daniele

    Hi Eric

    I have this problem on my blog with SMCF: when main window have flash (simple swf animation input by SWFObject) the modal is under the flash – flash overrides part of modal window. How could I fix it? I use simplemodal contact form 1.2.1. I saw that in the Simple Modal Version 1.2.2 the problem is fixed but I don’t understand the difference between SMCF and Simple modal… thanks

    daniele

  42. G

    Hi,

    anyone has any ideas why on IE i get two scrollbars ? Content is longer then modal, but in FF it’s ok. I’m using version SimpleModal 1.2.2

    HTML code is:

    CSS is :

    .surveyAnswerModal { cursor:default; height:450px; display:none; overflow: auto;}
    #simplemodal-overlay {background-color:#000; cursor:wait;}
    #simplemodal-container {height:452px; width:600px; background-color:#fff; border:3px solid #ccc; overflow: auto;}

    Js is called like this:


    $('#surveyAnswers').modal({position:['10%',] });

  44. Anders Rune Jensen

    Hi Eric

    Excellent plugin. I just upgraded to 1.2.2 and the centering is very nice. Though sometimes it doesn’t work. It seems that the problem is related to low browser resolution and big popup. The content is not too big, I capped it at 80% of the browser resolution and added scrollbars. If I resize the window the popup will center properly. Any idea what could cause this?

    Thanks

  46. Eric Martin

    @Richard – One option is to add an extra parameter to the close function:

    $.modal.close = function (persist) {
	$.modal.impl.close(persist || true);
};

    And then modify the close function:

    close: function (persist) {
...

	if (persist && this.opts.persist) {
		// insert the (possibly) modified data back into the DOM
		this.dialog.data.hide().appendTo(this.dialog.parentNode);
	}

...
}

    So, if you wanted to prevent it from persisting, just call:

    $.modal.close(false);

    The above is untested, so let me know if there are any issues.

    @masa – Great, glad you got it working!

    @Paulo de Tarso – I solved it by adding close:false to the options and putting the following code in the #move div:

    <a title="Fechar" class="botaoFechar simplemodal-close"></a>

    Then I just adjusted the width of p#move to 320px; Let me know if you have any problems getting that to work.

    @Victor – that is really strange. Do you have some sample code or URL where I can see this problem?

    @Daniele – SimpleModal is the JS library that creates the modal dialog. SMCF is the WordPress plugin that uses SimpleModal to display a contact form. If you are having problems with Flash showing through, you need to set the wmode on the Flash object (see this post for an example).

    @G – it looks like the issue could be caused by having overflow:auto on .suveryAnswerModal and #simplemodal-container. I suggest setting the height of the surveyAnswerModal and taking the overflow:auto off of simplemodal-container.

    @Anders Rune Jensen – thanks for letting me know, I’ll look into it. Thanks for the patch too!

  47. Doug Bonneville

    Hi – is it possible to disable both the close button and esc key? How would I do that? I need one odd-ball occurrence where the user has to be gated to selected yes or no, and not escape or close…

  48. Sunny

    I can tab out from the modal form & the focus is set to the other controls under the modal dialog… someone else notice this or it just me?

  49. Caspar

    hmm.. 100% height to the body in the css.. why oh why do I always try to figur out the solutions? 🙂
    I’ll have to remember that one..

Comments are closed.

Scroll to Top