Jquery Tools Overlay call on javascript function

Question

I have a jquery overlay window in my html alongwith a button to activate here is the code.

<!-- Validation Overlay Box -->
<div class="modal" id="yesno" style="top: 100px; left: 320px; position: relative; display: none; z-index: 0; margin-top: 100px;">
    <h2>  &nbsp;&nbsp;Authentication Failed</h2>

    <p style="font-family:Arial; font-size:small; text-align:center">
       Ether your username or password has been entered incorrectly.
       Please make sure that your username or password entered correctly...
    </p>

    <!-- yes/no buttons -->
    <p align="center">
        <button class="close"> OK </button>
    </p>
</div>

Here is the Jquery tools Script

<SCRIPT>
$(document).ready(function() {
    var triggers = $(".modalInput").overlay({
        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#a2a2a2',
            loadSpeed: 200,
            opacity: 0.9
        },
        closeOnClick: false
    });

    var buttons = $("#yesno button").click(function(e) {
        // get user input
        var yes = buttons.index(this) === 0;

        // do something with the answer
        triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
    });

    $("#prompt form").submit(function(e) {
        // close the overlay
        triggers.eq(1).overlay().close();

        // get user input
        var input = $("input", this).val();

        // do something with the answer
        triggers.eq(1).html(input);

        // do not submit the form
        return e.preventDefault();
    });

});
</SCRIPT>

And here how its called upon clicking on a button or a hyperlink

"<BUTTON class="modalInput" rel="#yesno">You clicked no</BUTTON>"

All i want is I dont want to show the overlay on clicking on button or through a link. Is it possible to call it through a javascript function like "showOverlay()" ??

Answer 1

You have 2 options, there's a load option you can use, like this:

var triggers = $(".modalInput").overlay({
 mask: {
  color: '#a2a2a2',
  loadSpeed: 200,
  opacity: 0.9
 },
 closeOnClick: false,
 load: true
});

This makes it open immediately, you can see the API demo here. If what you're after is to just show the overlay at some point later after setting it up, just trigger the event it's bound to, click, like this:

$(".modalInput").click();

This triggers the same handler behavior as actually clicking a button or link would, opening the overlay.