htmlcssmodalpopups

How to load an appened tag onto a URL on page load

I know there are more efficient ways at doing this but I have my reasons for doing it this way. I have a modal popup window. I would like for this window to pop up as soon as the visitor loads the page. As of right now the window is reached and opened by clicking a link that takes them to index.php#login_form.

"#login_form" being what I would like to add the URL on page load. Then they can chose to exit it once it has initially loaded with the popup.

Now is there a way to do this more efficiently with out having to change my css or code very much?

Thanks!

Solution

  • One easy way is to load the page directly with the hashtag login_form:

    http://www.script-tutorials.com/demos/222/index.html#login_form

    Or if you want to be more "precise" you can use jquery like this:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>

<!--Place this at the end of the body tag.-->
<script>
$(function(){
   window.location.hash = "login_form"; //this will add with js the #login_form hash at the end of th url
})
</script>

    You can use jquery to show the modal when the window is loaded: Try this code and you'll understand:

    $(function(){
   alert("Done loading");   
})

    You'll add the code to show the modal instead of the alert function. If the modal is shown or hidden with css, you can easily add a css class to an element with:

    $(".element").addClass("showModal);

    Or remove a class with:

     $(".element").removeClass("hideModal");

    Be sure to have the jquery library imported. I hope this answers your question.