SimpleModal v.1.1.1

v1.1.1

Deprecated: please see the current version.

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 to SimpleModal.

Demos

Tests

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.1, there are two options that enable you to pass in CSS attributes for the modal overlay and container. They are overlayCss and containerCss and take a key/value object of properties. See the jQuery CSS Docs for details.
  • In addtion to the new options, SimpleModal now handles settings some of the critical CSS properties, to prevent having to define them in external CSS files.
  • SimpleModal internally defines the following CSS classes:
    • modalOverlay: used to style the overlay div – helpful for applying common styles to different modal dialogs
    • modalContainer: used to style the container div – helpful for applying common styles to different modal dialogs
    • modalData: (Added in v1.1.1) used to style the data element – helpful for applying common styles to different modal dialogs
    • modalCloseImg: used to style the built-in close icon
Sample CSS, using default values
#modalOverlay {
  background-color:#000;
  cursor:wait;
}

#modalContainer {
  height:400px; 
  width:600px; 
  left:50%; 
  top:15%; 
  margin-left:-300px; /* half the width, to center */
  background-color:#fff; 
  border:3px solid #ccc;
}

#modalContainer 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 and container positioning:
<!--[if lt IE 7]>
<style type='text/css'>
  #modalContainer a.modalCloseImg{
    background:none; 
	right:-14px; 
	width:22px; 
	height:26px; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/x.png', sizingMethod='scale'
      );
  }
  #modalContainer {
    top: expression((document.documentElement.scrollTop 
        || document.body.scrollTop) + Math.round(15 * 
        (document.documentElement.offsetHeight 
        || document.body.clientHeight) / 100) + 'px');
  }
</style>
<![endif]-->

Options

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

  • overlay: (50) The opacity value, from 0 – 100. 0 = transparent 100 = opaque
  • overlayId: (‘modalOverlay’) The DOM element id for the overlay div
  • overlayCss: ({}) The CSS styling for the overlay div
  • containerId: (‘modalContainer’) The DOM element id for the container div
  • containerCss: ({}) The CSS styling for the container div
  • close: (true) Show the default window close icon? Uses CSS class modalCloseImg
  • closeTitle: (‘Close’) The title value of the default close link. Used if close == true
  • closeClass: (‘modalClose’) The CSS class used to bind to the close event
  • 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 (for IE6) 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'); // See Other Notes below regarding
                                     // data display property and
                                     // iframe details
    });
  });
}});
  • 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 (for IE6) elements.
  • 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 (for IE6) elements. After you’ve applied effects, etc., you’ll need to call $.modal.close();.
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 to have SimpleModal
                         // re-insert the data correctly and
                         // clean up the dialog elements
      });
    });
  });
}});

Other Notes

iframe
  • For IE6, SimpleModal handles the creation and removal of an iframe, which is needed to prevent select options from bleeding through the modal dialog. If you use an onClose callback, see onClose in the Callback section above.
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 persist is true, SimpleModal will “re-insert” the original element, with changes intact. If you use an onClose callback, 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, see onClose in the Callback section above.
Known Issues
  • The modal dialog will not display properly in IE7 if used in quirksmode. Fixed
Browser Compatibility

SimpleModal has been tested in the following browsers:

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

267 thoughts on “SimpleModal v.1.1.1”

  1. Greg G

    Eric: Great piece of code, but the lack of a show() method is a show stopper. I need to show the modal programmatically via a JavaScript function. So a second vote for a show() function.

  3. Olivier

    Hello,

    I downloaded the demo “contact” (https://www.ericmmartin.com/simplemodal/) and I have a problem.

    What happens is that the first time I click on the popup link, the modal dialog fades in.. upon closing it, it fades out just fine too. But then on, if I click again on the button it simply refuses to show anymore.

    In IE6, the javascript error “” appears :

    Line : 137
    Char : 7
    Error : ‘$.modal’ is null or not an object
    Code 0
    URL: https://…

    The source code is the same that in the demo. It seems there is a problem here :

    close: function (dialog) {
		$('#contact-container .contact-message').fadeOut();
		$('#contact-container .contact-title').html('Fermeture...');
		$('#contact-container form').fadeOut(200);
		$('#contact-container .contact-content').animate({
			height: 40
		}, function () {
			dialog.data.fadeOut(200, function () {
				dialog.container.fadeOut(200, function () {
					dialog.overlay.fadeOut(200, function () {
						$.modal.close();
					});
				});
			});
		});
	},

    Please, could you help me?

  4. Olivier

    Hello All,

    I have solved my problem : I used many JS files and there was a conflict between these files.

  5. Ajay Sethi

    Hey great script.
    Just one question.
    How can I get the modal box to display on page load?
    Thanks & great job!

  7. DPF

    Thanks for the great script – its fantastic.

    I’ve run into an Internet explorer problem. I’m using the following code in a series of links to call the answers FAQs in your simplemodal. The html links are:

    <ul>

    <li><a href="/faq1.php/" id="faq1">How does this work?</a></li>
    <li><a href="/faq2.php/" id="faq2">How much does it cost</a></li>
    <li><a href="/faq3.php/" id="faq3">Can I resell it?</a></li>
    <li><a href="/faq4.php/" id="faq4">How do you handle return?</a></li>
    <li><a href="/faq5.php/" id="faq5">Do you have an affiliate program?</a></li>

    </ul>


    and the javascript is:

    $(document).ready(function () {

    $('#faq1').click(function (e) {
    e.preventDefault();
    $.get('/faq1.php/', function (data) {
    $.modal(data);
    });
    });

    $('#faq2').click(function (e) {
    e.preventDefault();
    $.get('/faq2.php/', function (data) {
    $.modal(data);
    });
    });

    $('#faq3').click(function (e) {
    e.preventDefault();
    $.get('/faq3.php/', function (data) {
    $.modal(data);
    });
    });

    $('#faq4').click(function (e) {
    e.preventDefault();
    $.get('/faq4.php/', function (data) {
    $.modal(data);
    });
    });

    $('#faq5').click(function (e) {
    e.preventDefault();
    $.get('/faq5.php/', function (data) {
    $.modal(data);
    });
    });
    });

    Any one of the links open nicely the first time, however after closing the modal window (clicking the X icon) a javascript error occurs and the other links will not open. The error message using FirebugLite is (I’m not sure how to diagnose javascript errors in IE):

    Object doesn’t support this property or method (line 49)

    But the line number changes depending on which of the five links you click.

    This does not happen in Firefox (which is why it took so long to discover my mistake). In fact it works beautifully in Firefox.

    All is this is based solely on your Basic demo – and the advice you gave here on how to open a file instead of text in a div. I haven’t changed the CCS or the simplemodal.jquery.js or jquery.js at all.

    I am running this in a wordpress background – I’m not sure that that matters. I thought that it was a problem with making to many calls on one page – but it works great with Firefox – so it seems like its a IE thing. Any help would be greatly appreciated.

  8. DPF

    I enabled script debugging in IE and found that IE is getting hung up on $.modal(data); in the following javascript. On this particular page I have five links that use similar blocks of this code (just changed for the particular FAQ its requesting). This is why the error is on a different line depending on which link you select. The error just moves to the appropriate javascript line but it is always $.modeal(data).


    $('#faq5').click(function (e) {
    e.preventDefault();
    $.get('/faq5.php/', function (data) {
    $.modal(data);
    });
    });

    I really appreciate any help you could offer.

  9. DPF

    Eric – thank you for your fine work here. I diagnosed the error – it was on my end. I failed to delete wordpress’ wp-footer function with placed your smcf javascript into the document. This resulted in a conflict that Firefox could resolve but IE couldn’t. It was clear that the problem was with my document given that $.modal(data) was the hang up. So I looked at the page source that wordpress kicked out and found your smcf output on a page that didn’t call for it. I eliminated the wordpress function from the FAQ page template and I was golden.

    I works beautifully. Thank you – you’re a genius. Where is your donation page?

  10. Olivier

    Hello Eric,

    Is there a way to get the same window as in your demo called “Contact” but with the treatment that you can see here :
    https://jetlogs.org/jquery/floating_dialog.php

    I would say that I would like to use your simple modal but when I click on submit, I would like the data are written in the window which contain the button which allows to open your simple modal.

    Thank you very much for your help.

  11. Dan

    Hi Eric, love the script.
    Is there a way to place a YouTube embedded video in the modal?
    I added the object doe from youtube to a “div” and made it modal, Firefox works, but IE7 gives an error.
    Beating my head against a wall trying to figure it out.

    Would your solution also work for google maps?

    Thanks
    Dan

    Sample code –

  12. Dan

    Sorry, here’s the code

    <div id="videobox" class="videocontainer" style='display:none'>
    <table border="0" cellpadding="8" cellspacing="0" width="600" height="406" background="images/fav-yellow-grad.gif">
    <tr><td valign="top">
    <object width="425" height="355">
    <param name="movie" value="https://www.youtube.com/v/JikaHBDoV3k&hl=en"></param&gt;
    <param name="wmode" value="transparent"></param>
    <embed src="https://www.youtube.com/v/JikaHBDoV3k&hl=en&quot; type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
    </object>
    </td></tr></table>
    </div>

  13. Daniel

    Hi Eric, really nice plugin. I have a problem, i hacve spent a much time, i want to put an image inside of the simplemodal. I don’t know the image size so I can’t center it.
    I’ve been tring a code like this:

    $(‘a#test3’).click(function (e) {
    e.preventDefault();
    $(”).modal();
    });

    and a CSS similar,
    #modalContainer {height:auto; width:auto; margin-left:auto; margin-right:auto; background-color:#fff; border:3px solid #ccc;}

  14. Daniel

    Hi Eric, I’m afraid my last post was incomplete, (I forgot <code> tags :-))

    Thank You, Daniel.

    it’s suppose to be:


    $(’a#test3′).click(function (e) {
    e.preventDefault();
    $('').modal();
    });

  15. Eric Martin

    @DPF – do you have a link I can view?

    @Dan – I haven’t tried placing a YouTube video inside or google maps. If I have some time, I’ll give it a try.

    @Daniel – I’m not sure what you are asking. I don’t know what you are trying to do with $('').modal();. Please clarify so I can help…

  16. Daniel

    My last post has disappeared, I don’t know what has appened. What I want to do is put an image inside the simplemodal, I don’t know the size of the fotograph so I have problems to center it.

    Thank for atend my post (Sorry for my disgustin English)
    Daniel

    this the code:
    $('a#test3').click(function (e) {
    e.preventDefault();
    $('<div id=\'container\'><img src=\'https://www.myurl.com/files/images/cereals.jpg\' /></div>').modal();
    });

  17. Adam

    Is it possible to use SimpleModal to show a modal window overtop of a certain block element on the page (such as a div) without blocking the whole page?

  18. roddic

    this is roddic again
    my last post has been disappeared.How will i will add extra form property(like enctype=”multipart/form-data”) in this contactus form….
    😛

  19. RNS

    I have the same problem like roddic.
    I just want to use this simple modal contact form for image upload .Is it possible to upload image or any file using this modal window.

  20. Saso

    Hi Eric
    Great plugin you made, but i have one question about using phpmailer.
    I’m not using english characters, so i become strange chars on my email.
    So, i have added this to Build header:

    $header .= "Content-Type: text/html; charset="charset=utf-8"";

    And this didn’t help.
    Any suggestions? i would like to use utf-8 charset encoding.
    Thanks

  21. Saso

    Hi

    I have solved thid encoding problem.
    You have to change contact.php and add this lines to Build header.


    // Build header
    $header = "From: $email\n";
    // add
    $header .= "Content-Type: text/plain; charset='utf-8'; format=flowed\n"
    . "MIME-Version: 1.0\n"
    . "Content-Transfer-Encoding: 8bit\n"
    . "X-Mailer: PHP\n";

  22. Hervé

    That’s real good job !!!
    Just one little question from a ‘beginner” :

    When using simpleModal, is it possible to “open” the “modal window” by clicking on a picture instead of a “Demo” (or other !) Button ?

    Thanks a lot

  23. BenkiBirugaali

    Hi Eric

    How to increase the height of the container dynamically?.

    I am using external style sheet to define the styles to the container. I am adding DOM elements dynamically(say for some condition) to the modal .So while adding the
    DOM elements to the modal i want to increase the height of the container.How can i do it.Thanks in advance

  24. Eric Martin

    @Daniel – I would manually load the image and then determine its dimensions in order to center it within the dialog. Something like (untested):

    var i = new Image();
i.src = 'https://www.myurl.com/files/images/cereals.jpg';
$(i).load(function () {
    // determine dimensions of i
    var w = $(i).width();
    var h = $(i).height();

    // use this values to center the image in the dialog
});

    @Adam – SimpleModal is currently only for page blocking, not element blocking. I’ve thought about adding that feature, but for now, I’d suggest using BlockUI.

    @roddic, RNS – I don’t see any reason why you couldn’t use a dialog to as an upload form…

    @Saso – I haven’t added it into the Contact demo yet, but I added a UTF-8 support in SMCF. I’ll be adding it into the Contact demo soon.

    @Hervé – you can open a modal however you like 😉

    $('img').click(function () {
    $.modal('test');
});

    @BenkiBirugaali – you’d probably want to use one of the callbacks and just re-set the CSS values:

    onShow: function (dialog) {
    // increase the dimensions of the container
    dialog.container.css({
        height: newHeight,
        width: newWidth
    });
}
  27. Adam

    Eric – Thanks for answering my first question.

    Do you have any examples of a way to create a modal window that can be moved around the screen to different areas and resized?

  28. Gaurav

    I want the content inside simple modal to be scrollable. I tried adding

    #modalContainer
    { overflow:scroll;}

    I get scrolllbar, but X image is getting clipped, Can you suggest some alternatives?

  29. Davis

    Hi,

    This one really a good plugin.

    I have a question ( maybe stupid one ) is that I follow the instruction and
    setup the contact form ( demo one ) and it is work fine. but once if I make
    any change of the contact.php, it seems didn’t sync back when call it again.

    only if I clear IE’s cache, it will be fine. so is it an issue of ajax?
    or any alternative way to slove this issue?

    Thanks/Davis.

  31. Davis

    Hi Eric,

    Can I have some hint that if I want to modify this contact demo form furthermore? ie currently inside contact.js, xhr.responseText will contains the returned html from contact.php’s output, so how about if I want to use this xhr.responseText result set to create a new modal inside the current modal window? as I want use it as a master-detail input form purpose. so once user input login and successful, it will retreive related data in the same modal screen.

    for example, if

    xhr.responseText contains serval other input field ( kinda same css defination ) for user interact, so if create a new modal, something like that?


    $(xhr.responseText).modal({
    close: false,
    overlayId: 'contact-overlay',
    containerId: 'contact-container',
    onOpen: contact.open,
    onShow: contact.show,
    onClose: contact.close
    });

    I have no idea at all how to archive it, appreicate for any hints.

    THANKS/Davis.

  32. JqCoder

    Hello,

    This is a real nice plugin. Unfrtuanately it doesn’t work with Jquery 1.1.2. Has anyone found any solution for this? I really like to use this plugin. However in IE 6 it is appearing all the way to the down (left) and the close button (X) at the top.

    Thanks
    Shaila

  33. Eric Martin

    @Adam – I haven’t tried implementing any sort of draggable/resizable dialog yet. You could always try the UI libraries for that…and could even use the dialog library which should have PNP support for those features.

    @Gaurav – I’d suggest putting the overflow property on the data itself and not the container.

    @Davis –
    #1: Since the $.get function doesn’t allows for the cache property, you could try adding a “timestamp” to the URL to make it unique. For example, in contact.js, change:

    $.get("data/contact.php", function(data){

    To:

    $.get("data/contact.php?ts=" + (new Date()).getTime(), function(data){

    #2: Currently SimpleModal does not support multiple dialogs at the same time. However, the new version I am working on will support it.

    @JqCoder – I’ve tested it with 1.1.2 and not had any issues. If you are talking about the contact form, then you are correct, it uses animation functions that aren’t available in 1.1.2. What is preventing you from upgrading jQuery? As for your IE6 issue, is this an issue on one of your pages or one of the demo/test pages?

  34. Davis

    Hi Eric,

    Thanks for your hints.

    for #2, i have a workaround temporary now as …

    close current modal window, then popup/create a new one immediately ( with retreived xhr.responseText’s data ).

    now all i tested in IE7 only and fine, but once try in FF2, it got an error

    uncaught exception: [Exception… “Could not convert JavaScript argument” nsresult: “0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame :: https://localhost/icanchat/javascript/jquery/jquery-1.2.3.pack.js :: anonymous :: line 11″ data: no]

    im using jquery-1.2.3 & SimpleModal 1.1.1

    so any idea about it?

    Thanks/Davis

  36. Davis

    Hi Eric,

    I found the error generated due to php program fail to return html output.
    as Im using php + smarty template build for my website, so in this case

    code>
    inside contact.php
    $t->display( ‘contact.tpl’ );

    which contact.tpl file will included all html that I want to output to modal.

    the problem it seems that smarty function not work at all in FF2 in this suitation. ie $.get() -> php -> smarty template function, but fine in IE browser.

    so if any comment about this issue will be much appreciated.

    Thanks/Davis.

  37. Peter

    Hi,

    The script works great for me. I have just starting testing in firefox 3, and the dialog seems to show behind any flash on the main page. Is this a know issue? Are there any easy workarounds?

    Thanks
    Peter

  38. Davis

    Eric,

    sorry, it must be lot of coding and make myself crazy…)
    previous error due to something wrong of the tpl ( template file ) only hit in FF2, now sloved.. sorry again if bother you look at it.

    Davis.

  39. Peter

    The following changes seem to keep the dialog infront of flash videos for firefox 3. Not sure if this is the best way to do it, but it seems to work for me.

    // fix issues with IE and create an iframe
if ($.browser.msie && ($.browser.version < 7)) {
   this.fixIE();
}

if ($.browser.mozilla && ($.browser.version >= 1.9)) {
   this.fixFF3();
}

    and a bit further down….

    /*
 * Fix issues in IE 6
 */
fixIE: function () {
   var wHeight = $(document.body).height() + 'px';
   var wWidth = $(document.body).width() + 'px';

   // position hacks
   this.dialog.overlay.css({position: 'absolute', height: wHeight, width: wWidth});
   this.dialog.container.css({position: 'absolute'});

   this.addIFrame(wHeight, wWidth);
},
/*
 * Fix issues in FF 3
 */
fixFF3: function () {
   var wHeight = $(document.body).height() + 'px';
   var wWidth = $(document.body).width() + 'px';
   
   this.addIFrame(wHeight, wWidth);
},

/*
 * Add iframe
 */
addIFrame: function (wHeight, wWidth) {
   // add an iframe to prevent select options from bleeding through
   this.dialog.iframe = $('<iframe src="javascript:false;">')
      .css($.extend(this.opts.iframeCss, {
         opacity: 0, 
         position: 'absolute',
         height: wHeight,
         width: wWidth,
         zIndex: 1000,
         width: '100%',
         top: 0,
         left: 0
      }))
      .hide()
      .appendTo('body');
},

    EDIT (Eric): added missing + operators and formatted code

  40. Davis

    Hi,

    I am using contact demo for some more modification and got a problem to seek anyone help. thanks in advance.

    I got a markup with contact.php will process this input file, as usual this contact.php call by $.ajax()

    contact.php
    if( is_uploaded_file( $_FILES[‘imgfile’][‘tmp_name’] ) )
    { babaababab }

    but don’t know why php is_uploaded_file() returned fail. i call $.ajax with following, is it somthing need to set for it?

    $.ajax({
    url: ‘contact.php?ts=’ + (new Date()).getTime(),
    data: $(‘#contact-container form’).serialize(),
    type: ‘post’,
    cache: false,
    dataType: ‘html’,
    complete: function (xhr) { … }

    Thanks/Davis.

  42. Konstantin

    Hi,

    I have one problem in IE7… Why script working slowly than necessary?

    function modalOpen (dialog) {
    dialog.overlay.fadeIn('slow', function () {
    dialog.container.fadeIn('slow', function () {
    dialog.data.show('slow');
    });
    });
    }

    And after ‘modalOpen’, memory usage up from 50mb to 80mb?

    Sorry for my english. thx.

  45. Eric Martin

    @Peter – thanks for the suggested code fix. When I have some time, I’ll look into it further.

    @Davis – glad you got your first issue worked out 😉 As for the upload issue, in reading the PHP docs for is_uploaded_file, it looks like it only works for a HTTP POST. Even though you have type: 'post',, the fact that you are adding values to the query string (GET) might be causing an issue. Try changing that back to just url: 'data/contact.php', and see if that works.

    @Konstantin – I can’t reproduce the issue that you describe. Is it happening on one of my pages or on something you’ve coded?

    @Dobes – what version of FF are you using? I’m using 2.0.0.14 and I don’t have any issues with the cursor. I do remember running into this issue, but can’t remember exactly what I had to do to fix it 🙁

  46. Davis

    Hi eric,

    Followed what your suggestion, but no luck..:(
    I got another text input field inside the same form, no problem at all can access it by $_POST in either url: data/contact.php or contact.php?ts=…. way, strange?

    in general, inside a form definition, it supposed should include , is it possible
    for the ajax dataType: 'html' issue? also tried set to ‘multipart/form-data’, also no luck.

    Thanks/Davis.

  47. Davis

    I meant ‘multipart/form-data’ in general will include in a form if any input file type included. Thanks/Davis.

  48. Dobes

    @Eric – Thanks for thinking about it – I guess I’ll take a look at the code and see if I can figure out what you did.

  49. Bastor

    Hi, great plugin.

    I have one question. Is it possible to put some css for overlay to make shadow ? Currently I’m using modified by myself thickbox plugin to achieve this effect but your plugin looks better and if I could achieve shadow for overlay it would be great.

  50. Davis

    Hi Eric,

    As somebody reported that $.ajax didnt support file upload inside a form, but jquery.form plugin did support it, so i have try to call in this way, and need help how to activate it..:)


    show: function (dialog) {
    $('#contact-container .contact-login').click(function (e) {
    e.preventDefault();
    $('#cool').ajaxForm( {
    success: function () { alert('x');}});

    a form with id='cool', but why nothing happen when that submit button being clicked?

    Thanks/Davis.

Comments are closed.

Scroll to Top