单击不同的按钮即可显示相同的对话框

时间:2014-07-02 06:47:23

标签: javascript jquery html css

查看fiddle ..在jquery中有一些问题,因为当我点击任一按钮时仍然只显示1个弹出窗口

脚本

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

function ShowDialog(modal) {
   $("#overlay").show();
   $("#dialog").fadeIn(300);
   if (modal) {
       $("#overlay").unbind("click");
   } else {
       $("#overlay").click(function (e) {
           HideDialog();
       });
   }
}

function HideDialog() {
   $("#overlay").hide();
   $("#dialog").fadeOut(300);
}

1 个答案:

答案 0 :(得分:0)

$(document).ready(function ()
 {
   $("#btnShowSimple").click(function (e)
    {
     ShowDialog('dialog');
     $("#model").reveal();
     e.preventDefault();
   });
   $("#btnShowShare").click(function (e)
    {
     ShowDialog('dialog1');
     $("#model1").reveal();
     e.preventDefault();
   });
   $("#btnClose").click(function (e)
    {
     HideDialog();
     e.preventDefault();
   });
  $("#btnClose1").click(function (e)
  {
     HideDialog();
     e.preventDefault();
  });
   $(document).keyup(function(e) {
    if (e.keyCode == 27) {
         HideDialog(); }
  });
 });
  function ShowDialog(modal)
   {
    $("#overlay").show();
    $("#"+modal).fadeIn(300);
    if (modal)
    {
     $("#overlay").unbind("click");
    }
   else
    {
     $("#overlay").click(function (e)
     {
        HideDialog();
     });
  }
 }
function HideDialog()
 {
    $("#overlay").hide();
    $(".web_dialog").fadeOut(300);
 } 

演示:

http://jsfiddle.net/Gu6zU/

您必须为div使用唯一ID。