Question

I am a newbie in jscript and jquery. I am creating a website, which needs to open modal dialog on clicking on hyper links.

In a sample code (from a website) I saw that, it is using something like this:

<a id="SendToFriend" class="button send" href="#modalTellAFriend" rel="modal" data-closetext="Close">

content=jQuery(div#modalTellAFriend)closetext="Fermer"
<span>Send</span>
</a>

So, basically, I can add the the like this:

<div id="first modal">
</div>

<div id="second modal">
</div>

Now, the simple qn, how do I write the jQuery function for achieving this? I would like to use validate and form for the modal screen as well

Answer 1

You can use the jQuery UI library to create modal dialogs http://jqueryui.com/demos/dialog/#modal

opening different dialogs for different rel attributes could be done like this:

$('a[rel="modal_1"]').click(function(){
  $( "#first_modal" ).dialog({
    closeText : 'Fermer',
    modal: true
  });
});

$('a[rel="modal_2"]').click(function(){
  $( "#second_modal" ).dialog({
    closeText : 'Fermer',
    modal: true
  });
});