如何使用Jquery创建多个内容弹出窗口

Question

如何使用jquery显示不同按钮的不同内容

<div id="output"></div>  
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
  <tr>
     <td class="web_dialog_title">Email this Article</td>
     <td class="web_dialog_title align_right">
        <a href="#" id="btnClose">Close</a>
     </td>
  </tr>

  <tr>
<td colspan="2" style="text-align: center;">

content
</td></tr></table>

$(document).ready(function () { 
    $("#btnShowSimple").click(function (e) {
        ShowDialog(false);  
        e.preventDefault(); 
    });
    $("#btnShowShare").click(function (e) {
        ShowDialog(false); 
        e.preventDefault(); 
    }); 
    $("#btnClose").click(function (e) {
        HideDialog(); 
        e.preventDefault(); 
    }); 
    $(document).keyup(function(e) {
        if (e.keyCode == 27) { 
            HideDialog(); 
        }
    });
 }); 

Answer 1

我会将content放在div元素中： <div id="myContent">content</div> 然后在脚本中： $("#myContent").html("New content"); 在每个功能。像这样：

$(document).ready(function () { 
    $("#btnShowSimple").click(function (e) {
        ShowDialog(false);  
        $("#myContent").html("Simple content");
        e.preventDefault(); 
    });
    $("#btnShowShare").click(function (e) {
        ShowDialog(false); 
        $("#myContent").html("Share content");
        e.preventDefault(); 
    }); 
    $("#btnClose").click(function (e) {
        HideDialog(); 
        e.preventDefault(); 
    }); 
    $(document).keyup(function(e) {
        if (e.keyCode == 27) { 
            HideDialog(); 
        }
    });  });

修改

以下是我对评论中的代码you linked to所做的事情（相关部分）：

  $("#btnShowSimple").click(function (e)
  {
     $("#dialog").html("Simple");
     ShowDialog(false);
     e.preventDefault();
  });

  $("#btnShowModal").click(function (e)
  {
     $("#dialog").html("Modal");
     ShowDialog(true);
     e.preventDefault();
  });