ericmmartin / simplemodal

A modal dialog framework for jQuery
http://simplemodal.com/
Other
506 stars 229 forks source link

Simplemodal opens on page load by default, need to avoid this #50

Closed GMEHTA1981 closed 10 years ago

GMEHTA1981 commented 10 years ago

I have this script jQuery(function ($) { $('#basic-modal .basic').click(function (e) { e.preventDefault(); $('#basic-modal-content').modal(); });

    $('#closePopup').click(function (e) {
        $.modal.close();
    });

    $("#basic-modal-content").modal({
        onOpen: function (dialog) {
            dialog.overlay.fadeIn('slow', function () {
                dialog.container.slideDown('slow', function () {
                    dialog.data.fadeIn('slow');
                });
            });
        }
    });

    $("#basic-modal-content").modal({
        onClose: function (dialog) {
            dialog.data.fadeOut('slow', function () {
                dialog.container.slideUp('slow', function () {
                    dialog.overlay.fadeOut('slow', function () {
                        $.modal.close(); // must call this!
                    });
                });
            });
        }
    });
    return false;
});

Simple modal opens as soon as my asp.net page loads ? why cant figure out. Please help

visualspark commented 10 years ago

In your script you have one modal that is initalised with no options from a click event, and two separate modals on the same element with different options that are inatialised on the DOM ready.

Try something like this

jQuery(function ($) {

    var simpleOptions = {
        // specify a custom class if you want. Let simpleModal handle binding of close click event
        closeClass: 'closePopup',

        onOpen: function (dialog) {
            dialog.overlay.fadeIn('slow', function () {
                dialog.container.slideDown('slow', function () {
                    dialog.data.fadeIn('slow');
                });
            });
        },

        onClose: function (dialog) {
            dialog.data.fadeOut('slow', function () {
                dialog.container.slideUp('slow', function () {
                    dialog.overlay.fadeOut('slow', function () {
                        $.modal.close(); // must call this!
                    });
                });
            });
        }
    };

    // Use on instead of shorthand in new versions of jQuery as reccomended by them
    $('#basic-modal .basic').on('click',function (e) {
        e.preventDefault();
        $('#basic-modal-content').modal(simpleOptions);

        // shouldn't be needed because of e.preventDefault
        return false;
    });
});