SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face dialog box to load on html page open

    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. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,631
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Fancybox has that option.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,619
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by Nivi2013 View Post
    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?

  9. #9
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by guido2004; Feb 19, 2013 at 01:27. Reason: added code tags

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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.

    Quote Originally Posted by Nivi2013 View Post
    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>

  11. #11
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

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

  13. #13
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by Nivi2013 View Post
    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

  15. #15
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I have resolved all my issues. Everything has been great.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •