I have the following setup:
- ASP.Net page which contains a web form (payment form).
- Certain hidden page elements containing help text (for example a "where is the card security code" image)
Currently, when the user clicks a help link for the form element, for example: "Where Can I Find This?" for security codes, I use jQuery to $.show() the div containing the help text. The div contains a "close" link which $.hide() the div again.
Now I'd like to add the functionality to close the div if the user clicks outside it, and to dim the rest of the page (like shadow box). This is easy for most elements, I can just use shadowbox directly instead of $.show(), by calling:
Shadowbox.open({
content: $('#MyInfoDiv').html()
});
And Shadowbox will display the content of the div.
However, one of my info divs has an asp:Button in it (for resetting the user password if they can't remember it). Using the above method works to display the content, but the button click isn't linked up because shadowbox creates a new element and so the clickhandler isn't bound.
Is there a way to get shadowbox to display existing DOM elements (I don't think this is possible), or will I have to roll my own (5000px wide & high transparent div behind my popup with a "close" click handler? Cross browser compat. a pain to sort...)?
Is there a simple alternative I'm missing?
Cheers all,
xan