open modal box I ...">
Geek Answers Handbook

Modal appears on page load

Below is my code, but modal only appears when someone clicks

<a href="#" rel="modal-profile">open modal box</a>

I want to know how I can change my next code so that my modal file appears on the page.

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery.noConflict(); // Position modal box in the center of the page jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px"); this.css("left", ( jQuery(window).width() - this.width() ) / 2+jQuery(window).scrollLeft() + "px"); return this; } jQuery(".modal-profile").center(); // Set height of light out div jQuery('.modal-lightsout').css("height", jQuery(document).height()); // Fade in modal box once link is clicked jQuery('a[rel="modal-profile"]').click(function() { jQuery('.modal-profile').fadeIn("slow"); jQuery('.modal-lightsout').fadeTo("slow", .5); }); // closes modal box once close link is clicked, or if the lights out divis clicked jQuery('a.modal-close-profile, .modal-lightsout').click(function() { jQuery('.modal-profile').fadeOut("slow"); jQuery('.modal-lightsout').fadeOut("slow"); }); }); </script> <style type="text/css"> body { color:#333; background-color:#ec176c; font-family:Arial, Helvetica, sans-serif; font-size:12px; } .modal-profile h2 { font-size:2em; letter-spacing:-1px; } .modal-profile { display:none; height: 250px; width: 500px; padding:25px; border:1px solid #fff; box-shadow: 0px 2px 7px #292929; -moz-box-shadow: 0px 2px 7px #292929; -webkit-box-shadow: 0px 2px 7px #292929; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; background: #f2f2f2; z-index:50; } .modal-lightsout { display:none; position:absolute; top:0; left:0; width:100%; z-index:25; background:#000; } a.modal-close-profile { position:absolute; top:-15px; right:-15px; } a.modal-social { margin:0 10px 0 0; } </style> </head> <body> <div class="container"> <div class="modal-lightsout"></div> <div class="modal-profile"> <h2>Nam liber tempor cum soluta nobis eleifend</h2> <a href="#" title="Close profile window" class="modal-close-profile"><img border="0px" src="close.png" alt="Close profile window" /></a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> <a href="#" rel="modal-profile">open modal box</a> </div> </body> </html>
0
source share
3 answers

You can do it like below

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

and name it when the page loads, as shown below.

jQuery (document) .ready (function () {

modalload ();

});

and then your modal will appear after the page loads. You can also download the modal after some time loading the site by calling the timer function.

Hope this solves your problem.

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

Place above in . ready for the document

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

Thus, your modal display methods will be executed as soon as the document is ready

Demo

Hope this helps

+1
source

To load only the page, just remove the click handler, for example:

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

To save the click handler and still open it on the page load, simply invoke the click as follows:

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

Just add .click() at the end of your function and it will work when the page loads.

+1
source

More articles:


All Articles