Jquery Tools Overlay call on javascript function

Question

Hi Guys,

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(); });

});

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.