Question

这里我的Div #PopupDiv由dafault隐藏当我点击＃Btn1它的显示#PopupDiv但是用户点击显示器上的任何地方它应该隐藏

<div>
  <input type="button" id="Btn1" value="BtnClick" />
</div>
<div id="PopupDiv">
  <p>Hello Popup Grid</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

{
      "RoleName" : "Verify",    
        "IsActive" : true,
        "UIList" : [{
                "UiName": "One",
                "View" : false,
                "Edit" : false
            },{
               "UiName": "Two",
                "View" : false,
                "Edit" : false
            },
              {
                "UiName": "Three",
                "View" : false,
                "Edit" : false
            },
             {
                "UiName": "Four",
                "View" : false,
                "Edit" : false
            },
              {
                "UiName": "Five",
                "View" : false,
                "Edit" : false
            }]

}

Answer 1

你可以这样做，你可以使用.stopPropagation()来实现这个

＆＃13;

jQuery(function($) {
    $('#PopupDiv').hide();
    $('#Btn1').click(function (e) {
       e.stopPropagation();		
       $('#PopupDiv').show();
    });

    $(document).click(function (e) {
      e.stopPropagation();
      $('#PopupDiv').hide();
   });
});

＆＃13;

<div>
  <input type="button" id="Btn1" value="BtnClick" />
</div>

<div id="PopupDiv">
  <p>Hello Popup Grid</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

希望这会有所帮助：

＆＃13;

$(document).ready(function () {
  $('#PopupDiv').hide();
  $('#Btn1').click(function () {
    alert();
		$('#PopupDiv').show();
  })
  $(document).click(function (e) {
      alert('o')
      if (e.target.id != "Btn1") {
         $('#PopupDiv').hide();
      }
  })
})

＆＃13;

<div>
  <input type="button" id="Btn1" value="BtnClick" />
</div>

<div id="PopupDiv">
  <p>Hello Popup Grid</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

＆＃13;

Answer 3

您可以查看以下代码，希望它有所帮助： -

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('#PopupDiv').hide();           
            $('body').click(function(evt) {
            if(evt.target.id == "Btn1")
            {
            $('#PopupDiv').show();
            }else {
             $('#PopupDiv').hide();
             }
})
        })
    </script>
</head>
<body>
    <div>
        <input type="button" id="Btn1" value="BtnClick" />
    </div>

    <div id="PopupDiv">
        <p>Hello Popup Grid</p>
    </div>
</body> 
</html>

Answer 4

请尝试以下操作，这会在您div时显示click button，并在您点击页面中的任意位置时隐藏。

e.stopPropagation - 防止事件冒泡DOM树，防止任何父处理程序被通知事件。

$(document).ready(function(){
	var pop = $("#PopupDiv");
  $(pop).hide();
  $("#Btn1").on("click",function(e){
   	e.stopPropagation();
  	$(pop).show();
  });
   $("p").on("click",function(e){
   	e.stopPropagation();
  });
  $("html,body").on("click",function(e){
  	e.stopPropagation();
    $(pop).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <input type="button" id="Btn1" value="BtnClick" />
</div>
<div id="PopupDiv">
   <p>Hello Popup Grid</p>
</div>

如何在点击显示屏上的任何位置时隐藏div

4 个答案: