Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Submodal

    Hochgeladen von

    basant_sujal
    342 Ansichten4 Seiten
    After downloading the code it's as easy as including references to a couple files and inserting some HTML into your page. SubModal.js is where all the action happens. Inside event handlers are attached for the load and resize events of the browser. The first argument is the file to load, followed by width and height (integers) the fourth argument allows you to pass a javascript function that will be called when the window is closed - by calling hidePopWin(true)

    Originalbeschreibung:

    Originaltitel

    submodal

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    DOC, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    After downloading the code it's as easy as including references to a couple files and inserting some HTML into your page. SubModal.js is where all the action happens. Inside event handlers are attached for the load and resize events of the browser. The first argument is the file to load, followed by width and height (integers) the fourth argument allows you to pass a javascript function that will be called when the window is closed - by calling hidePopWin(true)

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOC, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    342 Ansichten4 Seiten

    Submodal

    Hochgeladen von

    basant_sujal
    After downloading the code it's as easy as including references to a couple files and inserting some HTML into your page. SubModal.js is where all the action happens. Inside event handlers are attached for the load and resize events of the browser. The first argument is the file to load, followed by width and height (integers) the fourth argument allows you to pass a javascript function that will be called when the window is closed - by calling hidePopWin(true)

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOC, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 4

    After downloading the code it’s as easy as including references to a couple files and

    inserting some HTML into your page.

    At the head of your file you’ll want to add the following references…

    <head>

    <link rel="stylesheet" type="text/css" href="subModal.css" />

    <script type="text/javascript" src="common.js"></script>

    <script type="text/javascript" src="subModal.js"></script>

    </head>

    The css contains sizing and display styles for the popup elements.

    Common.js contains standard functions I find useful such as attaching event


    handlers and obtaining the browser’s dimensions.

    subModal.js is where all the action happens. Inside event handlers are attached for
    the load and resize events of the browser. The load event initializes dhtml objects
    that are reused when showing, hiding, or resizing the window.

    The javascript file also inserts any HTML necessary for the subModal.

    Now that everything’s in place all you have to do is add something that’s going to
    call the function to show the modal.

    This is accomplished by calling the following javascript

    showPopWin('your_url_here.html', width, height, null);

    OR by using a CSS selector like so


    <a class="submodal" href="modalContent.html">show modal window using
    class</a>

    <a class="submodal-200-400" href="modalContent.html">show modal window


    using class and overriding default size</a>

    The first argument is the file to load, followed by width and height (integers). Any
    content that overflows these dimensions will scroll inside the modal, like a real
    window.

    The fourth argument allows you to pass a javascript function that will be called
    when the window is closed – by calling hidePopWin(true). hidePopWin will not call
    the return function by default. This is useful for cancel button functions.

    Using callback functions with SubModal

    Define the function that’ll be called on the opening page.

    Pass the function you’d like to call into 'showPopWin'.

    Assign any return value on the modal page itself, if necessary

    Call the hidePopWin function passing true

    It might be easier to grok in code, so here's an example:

    On the SubModal opening page

    // returnVal can get passed in from the modal page itself...

    //....see below for info

    function returnRefresh(returnVal) {

    window.document.reload();

    // Open the modal, passing in the refresh function

    // as a reference NOT a string.


    showPopWin('mymodal.html', 500, 500, returnRefresh);

    From inside the SubModal window

    // If you plan to pass a return value assign it

    var returnVal = "something";

    // When you're ready to close the pop window

    // call this...Passing true makes sure the return

    // function gets called.

    window.top.hidePopWin(true);

    I’ve been using subModal as well, but there is a problem in Safari when the window
    has an active scrollbar. The code used does not calculate the scroll amount so the
    centering is off leaving uncovered areas of the original page.

    I fixed it witht the following code that I found somewhere else:

    // — This original code did not work well in Safari

    //var theBody = document.documentElement;

    //var scTop = parseInt(theBody.scrollTop,10);

    //var scLeft = parseInt(theBody.scrollLeft,10);


    var scLeft,scTop;

    if (self.pageYOffset) // all except Explorer

    scLeft = self.pageXOffset;

    scTop = self.pageYOffset;

    else if (document.documentElement && document.documentElement.scrollTop)

    // Explorer 6 Strict

    scLeft = document.documentElement.scrollLeft;

    scTop = document.documentElement.scrollTop;

    else if (document.body) // all other Explorers

    scLeft = document.body.scrollLeft;

    scTop = document.body.scrollTop;

    Das könnte Ihnen auch gefallen