Translating REL attribute action into Jquery action

Question

Using jquery-tools to open a modal-window in-document and I'd really like some clarification from anyone who knows;

Jquery:

  $(function() {

    $(".modalInput").overlay({

        mask: {
          color: 'silver',
          loadSpeed: 200,
          opacity: 0.5
        },

        closeOnClick: true
    });

  });

HTML:

<div rel="#prompt" class="modalInput">show modal</div>

<div class="modal" id="prompt">
  <h2>This is a modal dialog</h2>

  <p>
    Test modal dialog.
  </p>

</div>

This all works fine, but I'd like to know how to manipulate the action with jquery. I've read http://www.w3schools.com/TAGS/att_a_rel.asp, I just don't understand the relationship between the tag's rel/class when it comes to handling it in a jquery function. IE, how do I attach the action of opening the modal to a click handler with jquery:

HTML:

<div id="promptID" class="modalInput">show modal</div>

<div class="modal" id="prompt">
  <h2>This is a modal dialog</h2>

  <p>
    Test modal dialog.
  </p>

</div>

Jquery:

$("#promptID").click(function() {
    $(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
          color: 'silver',
          loadSpeed: 200,
          opacity: 0.5
        },

        closeOnClick: true
    });
});

Answer 1

You're really very close.

Instead of constructing the actual overlay within the click function, we'll simply build it outside of the click and call the load event when we click the button.

$(".modal").overlay({

    mask: {
      color: 'silver',
      loadSpeed: 200,
      opacity: 0.5
    },

    closeOnClick: true,
    load: false // will not load immediately, must be fired manually to see.
});

We can use the attribute selector provided by jQuery to target elements with a rel attribute matching #prompt.

In the below, we'll call the instance of the overlay, and apply the load() method, which will bring the modal to the front and make it visible

$('[rel=#prompt]').click(function(){
    $('.modal').overlay().load()
});

Here's the stand alone demo provided by jQuery Tools concerning how to programatically trigger the load event for the modal dialog.