SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  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,658
    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
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 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
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 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)
    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.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

  9. #9
    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.

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

  11. #11
    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
  •