Dialog box to load on html page open

JavaScript
1

Hello,

I need to open modal dialog box when my html page opens.
Currently,
my dialog opens on clicking a link.

this is the script.

<script>
jQuery(document).ready(function()
{
//initializes object utilities
myutil= new my_utilities();
myutil.mydialog(‘modaldialog1’,{top:165, width:110});
})

<body>
<a href=“#” class=“dialog-modaldialog1” >click dialog</a>

<div id=“modaldialog1”>
place content here
</div>
</body>

this is the code i have i html page. how do i make my modal dialog appear when i open my html page.
Please…help me out

I am new to this area of technology, i have been doing lot of google…but everything has href tag.
i just don’t get this javascript part. I got to submit my page.

thanks,
Nivi

2

Fancybox has that option.

3

Thanks. but is there any way of adding/modifying to javascript above to call dialog when opening the html page
And please don’t give me one line answers. i need some sort of explanation. i don’t know anything about javascript till i came to use this dialog.

thanks.

4

Here is an example of how someone else has done it:

http://www.dynamicdrive.com/forums/showthread.php?56899-jquery-popup-window-that-opens-on-page-load

See if that code is useful to you.

Personally, though, I find these popups very annoying, and I usually abandon a site that does that to me.

5

Thanks. using window attribute gives dialog on load. but in what way, i would modify my script part, to use the example to call the dialog on page load.
Now, i saw lot of examples like this. but i am looking at the way on how to modify my script part to adapt the changes in the example. That is where i am stuck.
my dialog opens on clicking link. it should not happen. sholud open when i open my page url.

And again…i don’t know anythng about javascript till my encounter with this dialog.

<script>
jQuery(document).ready(function()
{
//initializes object utilities
myutil= new my_utilities();
myutil.mydialog(‘modaldialog1’,{top:165, width:110});
})

<body>
<a href=“#” class=“dialog-modaldialog1” >click dialog</a>

<div id=“modaldialog1”>
place content here
</div>
</body>
thanks.

6

Hi there,

If you can you post a link to your site I don’t mind giving you a hand to implement Ralph’s solution.

7

Thanks.
Ok will try to post it in js fiddle but not sure due to company rules .
But that’s the code in my HTML page.

Script files- refers to jQuery-1.8.2.min.js
And jquery.min.js and I got a local scriptfile
Called myutilities.js.

The dialog mydialog is what calls the dialog. That what initializes the dialog box and calls modaldialog1.
Modaldialog1 is the id of the dialog box.

Any help with this information,any help greatly appreciated .
The point is I am a fresher and that’s the struggle.
I understand the examples but how to implement in my script part, is what I am wondering .

Thanks. Appreciate it.

8

I appreciate that you might be restricted to what you can post by your company, but what you have provided already is not really enough to go on.
We don’t know what myutilities.js is doing or how the rest of your page is structured.

Did you try the solution provided on the CodeProject site?

9

Ok…thanks for all the reference so far. i had submitted it the way it is and have said i will try that out later.

I have been doing lot of digging in to this modal , and came across leanmodal.js.
I used the explanation in leanmodal, and typed this , but the trigger element did not work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dialog using leanModal</title>


<script src="jquery.leanModal.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script>
   $(function()
   {
$("#overlaytrigger").leanModal({ top : 200, closeButton: ".modal_close" });
});

</script>

<style>

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#DialogBox
{
width:880px;
Height:auto;
}



</style>


</head>

<body>



<a id="overlaytrigger" rel="leanModal" href="#DialogBox">Basic Popup</a>

<div id="DialogBox">
<h1> Welcome to my Home Page</h1>
</div>

<div id="lean_overlay"></div>




</body>
</html>

Can you modify this and give me full functional code to open dialog box on page open with leanmodal.js. and also please point out what i did wrong.
And any suggestions. I am struggling. plz, i need a helping hand…

Thanks,
Nivi.

10

Hi there,

You are almost there.
The only thing you need to do is simulate the onclick event once the page has loaded to get your modal to display.

Just a tip - asking for the solution in this way is generally quite a good way to get your question ignored.
With this in mind, here’s the code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Dialog using leanModal</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
    <script src="http://leanmodal.finelysliced.com.au/js/jquery.leanModal.min.js" type="text/javascript"></script>
    <style type="text/css">
    #lean_overlay{
      position: fixed;
      z-index:100;
      top: 0px;
      left: 0px;
      height:100%;
      width:100%;
      background: #000;
      display: none;
    }
  
    #DialogBox{
      width:880px;
      Height:auto;
    }
    </style>
  </head>

  <body>
    <a id="overlaytrigger" rel="leanModal" href="#DialogBox" name="overlaytrigger">Basic
    Popup</a>
  
    <div id="DialogBox">
      <h1>Welcome to my Home Page</h1>
    </div>
  
    <div id="lean_overlay"></div>
    <script type="text/javascript">
      $(function(){
        $("#overlaytrigger").leanModal({ top : 200, closeButton: ".modal_close" });
        $("#overlaytrigger").click();
      });
    </script>
  </body>
</html>
11

Thanks. Point noted. Now, can I introduce window attribute inside the same function to display the modal on page open, or I have to write another function(). -with ref to dynamic drive.com post.

Thanks.

12

Hi,

My code will open the dialog box on page open, or do you mean something else?

13

Yes it does. Hoorayyy!!! Thank you so much.
And also thanks to others, through this post I have learnt lot.
Cheers.

Can I get an explanation , how adding that click() opens dialog on page open.
Any articles or reference or book, I want to understand the solution u had given. Sorry, if this question looks not so right.

Appreciate it. Thanks.

14

Sure.

You have this:

<a id="overlaytrigger" rel="leanModal" href="#DialogBox" name="overlaytrigger">Basic Popup</a>

which you initialize like this when the page loads:

$(function(){
  $("#overlaytrigger").leanModal({ top : 200, closeButton: ".modal_close" });
});

When you click on this link, the modal box fires.

All I did was simulate a click on this link when the page loads, by adding this line:

$("#overlaytrigger").click();

which has the desired effect.

For the case you know absolutely nothing about jQuery, all that the above statement says is select the item with an id of “overlaytrigger” and simulate a click event.

HTH

15

Thanks. I have resolved all my issues. Everything has been great.