dialog box to load on html page open

**Nivi2013** · Feb 17, 2013 17:59

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

**PicnicTutorials** · Feb 17, 2013 18:00

Fancybox has that option.

**Nivi2013** · Feb 17, 2013 18:55

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.

**ralph.m** · Feb 17, 2013 19:14

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

http://www.dynamicdrive.com/forums/s...s-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.

**Nivi2013** · Feb 17, 2013 19:43

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.

**Pullo** · Feb 18, 2013 01:39

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.

**Nivi2013** · Feb 18, 2013 13:21

Originally Posted by Pullo

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.

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.

**Pullo** · Feb 18, 2013 13:28

Originally Posted by Nivi2013

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.

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?

**Nivi2013** · Feb 18, 2013 20:31

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.

Code HTML4Strict:

<!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.

**Pullo** · Feb 19, 2013 00:53

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.

Originally Posted by Nivi2013

Can you modify this and give me full functional code to open dialog box on page open with leanmodal.js

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:

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

**Nivi2013** · Feb 19, 2013 07:29

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.

**Pullo** · Feb 19, 2013 07:30

Hi,

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

**Nivi2013** · Feb 19, 2013 10:21

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.

**Pullo** · Feb 19, 2013 13:14

Originally Posted by Nivi2013

Can I get an explanation , how adding that click() opens dialog on page open.

Sure.

You have this:

HTML Code:

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

which you initialize like this when the page loads:

Code JavaScript:

$(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:

Code JavaScript:

$("#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

**Nivi2013** · Feb 20, 2013 18:55

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

User Tag List

Thread: dialog box to load on html page open

Thread Tools

Display

dialog box to load on html page open

Bookmarks

Bookmarks

Posting Permissions