Home/ Questions/Q 7870771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T01:43:06+00:00

Following is my code but the modal only appears when someone click on <a

  • 0

Following is my code but the modal only appears when someone click on

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

I want to know how can i modify my following code so that my modal appears on the page load.

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0