CODEWITHSUNDEEP
overlayjquery-tools
user193116
user193116

Reputation: 3568

How to use Jquery tools Overlay programmatically?

I wan to show an overlay programmatically. I tried to modify the code in this example Opening overlays programmatically. Instead of loading the overlay only once upon document load as shown in this example, I want to show the overlay everytome a user clicks the button. The problem is thatthe overlay is loaded only for the first click. It does not open for the subsequent clicks on the same button

Here is my code. 

<html>

<head>
    <title>jQuery Tools standalone demo</title>


    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>   
    <style>
        #facebox {


            display:none;


            width:400px;
            border:10px solid #666;


            border:10px solid rgba(82, 82, 82, 0.698);


            -moz-border-radius:8px;
            -webkit-border-radius:8px;
        }

        #facebox div {
            padding:10px;
            border:1px solid #3B5998;
            background-color:#fff;
            font-family:"lucida grande",tahoma,verdana,arial,sans-serif
        }

        #facebox h2 {
            margin:-11px;
            margin-bottom:0px;
            color:#fff;
            background-color:#6D84B4;
            padding:5px 10px;
            border:1px solid #3B5998;
            font-size:20px;
        }
    </style>
    <script>

        var overlayDiv=function(){ 
             $("#facebox").overlay({
                api: true,  
                top: 260,
                mask: {
                    color: '#fff',
                    loadSpeed: 200,
                    opacity: 0.5
                },
                closeOnClick: false,
                load: true
            })
        };
        $(document).ready(function() {    
            $("#triggerBtn").click(function(){
                console.log(" I have been CLICKED");
                overlayDiv();
            });

        });
    </script>        


<body>

    <button id="triggerBtn"> Trigger Overlay</button>
    <div id="facebox">
        <div>
            <h2>Facebox</h2>
            <p>
        This dialog is opened programmatically when the page loads. There is no need for a trigger element.
            </p>

            <form>
                <input type="file" />

            </form>

            <p style="color:#666">
        To close, click the Close button or hit the ESC key.
            </p>


            <p>
                <button class="close"> Close </button>

            </p>
        </div>

    </div>




</body>

Upvotes: 2

Views: 8543

Answers (4)

Evan
Evan

Reputation: 11

You should use:

$(".overlay").remove();

Upvotes: 0

jhvaras
jhvaras

Reputation: 2124

Simplify:

var overlay;

function overlayDiv()
{
    if (typeof overlay === 'undefined')
        overlay = $('#facebox').data('overlay').load();
    else
        overlay.load();

}

Upvotes: 1

dabra904
dabra904

Reputation: 163

This is working for me... I found this method on the jQuery Tools forum and seems to be the best I can find for now. 

<script>
function popup() {
if ($("#facebox").hasClass("init")) {
    $("#facebox").overlay().load();
}
else {
    $("#facebox").addClass("init");
    $("#facebox").overlay({

     // custom top position
     top: 260,

     mask: { color: '#838383',
         loadSpeed: 200,
         opacity: 0.5
     },  
     closeOnClick: true,
     load: true
    });
}
}
</script>

Upvotes: 1

vikmalhotra
vikmalhotra

Reputation: 10071

This should do the trick for you.

$("#triggerBtn").click(function(){
    console.log(" I have been CLICKED");
    $('#facebox').data('overlay').load();
});

More information here - Jquery Tools Overlay Scripting API

Upvotes: 2

Related Questions