Modal Appears On Page Load

Following is my code but the modal only appears when someone click on open modal box I want to know how can i modify my following c

Solution 1:

You can do this like bellow

function modalload(){

jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);
}

and call this in your page load like bellow

jQuery(document).ready(function () {

modalload();

});

and then your modal will appear after page load. you can also load the modal after some time of the site load by calling timer function.

Hope this will solve your problem

Solution 2:

jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);

Place the above in .ready for document

jQuery(document).ready(function () {
         jQuery('.modal-profile').fadeIn("slow");
         jQuery('.modal-lightsout').fadeTo("slow", .5);
    });

This way your methods to show modal box will happen as soon as the document is ready

DEMO

Hope this helps

Solution 3:

To make it load on only page load, just remove the click handler, like so:

jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);

To keep the click handler, and still make it open on page load, just trigger a click, like so:

jQuery('a[rel="modal-profile"]').click(function() {
    jQuery('.modal-profile').fadeIn("slow");
    jQuery('.modal-lightsout').fadeTo("slow", .5);
}).click();

Just add the .click() at the end of your function, at it will run on page load.