Question

I’ve been coming up to speed on jQuery but I think I’m still missing some fundamentals. I have a complex set of dialog popups (distilled below) and I’m lost at how to consolidate them into one ‘class’.

HTML:

 <div id="FirstDialogFrame" 
      title="First" 
      data-button="Alert First"
      data-alert="FirstAlert">
 </div>

 <div id="SecondDialogFrame" 
      title="Second" 
      data-button="Alert First"
      data-alert="SecondAlert" >
 </div>

 <button id="PopFirst">First</button>
 <button id="SecondFirst">Second</button>

JavaScript:

$("#FirstDialogFrame").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#SecondDialogFrame").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#PopFirst").click(function() {
    $("#FirstDialogFrame").dialog("open");
});

$("#SecondFirst").click(function() {
    $("#SecondDialogFrame").dialog("open");
});

Fiddle:

http://jsfiddle.net/tzerb/BYKqM/

Any feedback appreciated.

TIA.

Answer 1

HTML

 <div id="FirstDialogFrame" class="popup"
      title="First" 
      data-button="Alert First"
      data-alert="FirstAlert">
 </div>

 <div id="SecondDialogFrame" class="popup"
      title="Second" 
      data-button="Alert First"
      data-alert="SecondAlert" >
 </div>

 <button id="PopFirst">First</button>
 <button id="SecondFirst">Second</button>

Javascript

 $(".popup").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#PopFirst").click(function() {
    $("#FirstDialogFrame").dialog("open");
});

$("#SecondFirst").click(function() {
    $("#SecondDialogFrame").dialog("open");
});