jquery - 弹出窗口时启用/禁用点击功能

Question

   function unloadPopupBox() {    
        $('#popup_box').fadeOut("slow");
        $(".categoryContent").css({
            "opacity": "1"  
        }); 
        $('.categoryContent').click(function(){return true;});// Not working
        $(".headingA").bind('click');// Not working
        $( ".categoryMenu" ).tabs( { disabled: false } ); //Working
    }    

    function loadPopupBox() {   
        $('#popup_box').fadeIn("slow");
        $(".categoryContent").css({ 
            "opacity": "0.7"
        });  
        $('.categoryContent').click(function(){return false;});//Working
        $(".headingA").unbind('click');  //Working
        $( ".categoryMenu" ).tabs( { disabled: [1, 2, 3] } );  //Working 
    }   

当我打开弹出窗口时，应该禁用后台的一些特定点击，当弹出窗口关闭时，应该再次启用点击。但是这里禁用工作，而启用这些点击不起作用？我到底应该在这里做什么？？？

Answer 1

嘿，试试这个代码来制作模型弹出窗口。

<h3>JQuery Popup Dialogs</h3>

<input type="button" id="btnShowSimple" value="Simple Dialog" />
<input type="button" id="btnShowModal" value="Modal Dialog" />

<br /><br />       

<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">Online Survey</td>
     <td class="web_dialog_title align_right">
        <a href="#" id="btnClose">Close</a>
     </td>
  </tr>
  <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
  </tr>
  <tr>
     <td colspan="2" style="padding-left: 15px;">
        <b>Choose your favorite mobile brand? </b>
     </td>
  </tr>
  <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
  </tr>
  <tr>
     <td colspan="2" style="padding-left: 15px;">
        <div id="brands">
           <input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
           <input id="brand2" name="brand" type="radio" value="Sony" /> Sony 
           <input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
        </div>
     </td>
  </tr>
  <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
  </tr>
  <tr>
     <td colspan="2" style="text-align: center;">
        <input id="btnSubmit" type="button" value="Submit" />
     </td>
  </tr>
  </table>
  </div>

JS代码是

(document).ready(function ()
 {
  $("#btnShowSimple").click(function (e)
  {
     ShowDialog(false);
     e.preventDefault();
  });

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

  $("#btnClose").click(function (e)
  {
     HideDialog();
     e.preventDefault();
  });

  $("#btnSubmit").click(function (e)
  {
     var brand = $("#brands input:radio:checked").val();
     $("#output").html("<b>Your favorite mobile brand: </b>" + brand);
     HideDialog();
     e.preventDefault();
  });

});

  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);
 } 

尝试现场演示的链接

现场演示

希望对你有帮助