如何创建自定义模式弹出窗口-以及如何在其外部单击以将其关闭 [英] How to create a custom modal popup - and how to close it clicking outside of it

问题描述

 < a href ="javascript:void(0)" onclick ="document.getElementById('light3').style.display ='block'; document.getElementById('fade').style.display ='block'><按钮类型=" button"name =""value =""id =" readmorelink3> +< span class =" rmore>阅读更多</span></button></a> 

我正在使用上面的DOM经典 onClick 来简单地将divs显示为一个简单的弹出窗口.我在div中创建了一个关闭按钮，但是当用户单击 body 或不是打开div的任何位置时，我也希望打开div隐藏 hide .我已经尝试了一切-

我简单的叠加图(3之1)

 <！-阅读更多叠加图1->< div id ="light" class ="white_content">< a class ="close" href ="javascript:void(0)" onclick ="document.getElementById('light').style.display ='none'; document.getElementById('fade').style.display='none'"class =" textright"style =" color:#DDD！important; float:right;> CLOSE X</a>< h4> [Hey +]</h4>< h3>演示</h3>< h3> SUP</h3>< span>2.5升盎司/跨度.< br>< p>很酷的内容，关于很酷的东西.</p></div><！-//阅读更多叠加图1-> 

我尝试过这个家伙:

  $(document).click(function(){$('#mydiv').fadeOut(300);}); 

我和这个家伙搞砸了

  if($('#mydiv').is(:not(:visible)")){ 

//，反之亦然，如果可见等

---

也尝试过.

 //为了防止在单击#main时隐藏#menu$('#mydiv').click(function(e){e.stopPropagation();});//单击#menu的异地$('html').click(function(){$('#mydiv').hide();}); 

意识到我应该使用简单的jQuery而不是内联的方式完成此操作；但是我不想重做所有事情，所以寻求DOM/JavaScript解决方案.只需关闭打开或显示即可:阻止divs>显示时，只需在元素外部或在body标签上单击即可.

EG :显示DIV叠加层>单击元素的外侧并关闭.我将单击关闭按钮添加到了身体标签上，但完全弹出了弹出窗口，添加了包装纸，没有雪茄.

解决方案

查看此答案: https://stackoverflow.com/a/6144189/383904

---

jsBin演示

最简单的方法:

 < a data-pop ="1">呼叫弹出窗口1</a>< div data-popup ="1">< h2>弹出式窗口1的标题< span data-pop& times;</span></h2>< div>< p& Pop 1说明...</p><按钮数据弹出>确定</button></div></div> 

CSS

 /***弹出***/[数据弹出] {显示:无；位置:固定；z索引:9999；正确:0；左:0;边距:45px自动;宽度:50％;最小宽度:200像素；填充:15px 25px 25px;背景:#fff;过渡:盒影2s；框阴影:0 0 0 1900px hsla(220,7％，18％，0.6)，0 10px 30px -5px hsla(220,7％，18％，0.6);} 

jQuery:

 /////////弹出var $ popup = $(" [data-popup])，pHov =假；$ popup.hover(function(){pHov ^ = 1;});$(document).mousedown(function(){if(！pHov)$ popup.slideUp(240);});$("[data-pop]")).click(function(){var n = $(this).data('pop')var $ popup = n吗?$("[data-popup =""+ n +")]):$(this).closest("[data-popup]")；$ popup.slideToggle(240);}); 

仅当您在Popup下具有 mousedown 上的元素(不是 click ，仅是mousedown)上的元素使用 return false; 时，以上操作才会失败>或 event.stopPropagation(); ，在这种情况下，单击不会使DOM冒泡以到达触发弹出式窗口隐藏的 document .
因此创建更好的模态窗口 的更好解决方案是使用包含模态的全屏父叠加窗口.>

---

创建模式/弹出窗口的常见陷阱之一

---

相反，

使用 Modal-Parent 窗口，您要做的就是在该元素上注册一个单击以将其隐藏(以及他的孩子 Modal ).
比您可以为该父项设置样式并添加漂亮的不透明背景或将其保持透明...这取决于您的需求.这是一个示例:

MODAL LIVE DEMO«

html

的问题

 < h1>模态窗口测试</h1>< button class ="modalOpen"> SHOW MODAL</button>< p>某些段落...</p>< div id ="modalOverlay">< div id ="modal">< span class ="modalClose"& times;</span>< h3>模</h3>< button>用于测试内部传播的一些按钮</button>< button class ="modalClose"> Close modal</button></div></div> 

css

  #modalOverlay {显示:无；位置:固定；顶:0;左:0;宽度:100％;高度:100％;背景:rgba(255,255,255,0.8);}#modal {位置:相对；保证金:100px自动;背景:#fff;宽度:300px;内边距:30px;box-shadow:0 5px 50px -4px #aaa;}#modal span.modalClose {cursor:pointer;font-size:20px;位置:绝对；右:20px;上:15px;} 

jquery

  var $ modalOverlay = $('#modalOverlay');//缓存您的选择器var $ modal = $('#modal');var $ modalClose = $('.modalClose');var $ modalOpen = $('.modalOpen');$ modalOpen.click(function(){$ modalOverlay.stop().fadeTo(500,1);});$ modalOverlay.click(function(){$ modalOverlay.stop().fadeTo(500,0，function(){$(this).hide();});});$ modal.click(function(e){e.stopPropagation();//否则，点击会冒泡至重叠式广告});$ modalClose.click(function(){$ modalOverlay.click();//模拟点击以关闭模态}); 

总结一下，就像从上面的代码思想中可以看到的那样，我们没有使用 document 或 body 来监听弹出窗口关闭点击，我们完全依靠模式元素.

<a href="javascript:void(0)" onclick = "document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'"><button type="button" name="" value="" id="readmorelink3">+<span class="rmore">Read More</span></button></a>

I'm using the above DOM classic onClick to simply display divs as a simple pop-up. I have created a close button within the div but I would also like to have the open divs hide when the user clicks the body or anywhere that isn't the open div. I have tried absolutely everything --

My simple Overlay (1 of 3)

<!-- read more overlays 1 -->

<div id="light" class="white_content">

<a class="close" href="javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="textright" style="color: #DDD !important; float:right;">CLOSE X</a>

<h4>[Hey+]</h4>
<h3>Demo</h3>
<h3>SUP</h3>
<span> 2.5 fl. oz.</span><br>
<br>
<p>
Cool content, about cool things.
</p>

</div>

<!-- // read more overlays 1-->

I tried this guy:

$(document).click(function() {
    $('#mydiv').fadeOut(300);
});

I've messed with this guy:

 if($('#mydiv').is(":not(:visible)") ){

// and visa versa if visible etc

---

Also have tried.

 // To prevent hide #menu when click on #main
    $('#mydiv').click(function (e) {
        e.stopPropagation();
});

 // Click outsite of #menu
    $('html').click(function () {
    $('#mydiv').hide();
});

Realizing I have should have done this with simple jQuery and not inline; but I don't want to redo everything so seeking DOM / JavaScript solution. Simply to close the open or display: block divs > when they are displayed, by in addition clicking outside of the element or on body tag.

EG: DIV OVERLAY IS DISPLAYED > CLICK OUTSIDE OF ELEMENT AND IT CLOSES. I ADDED ONCLICK CLOSE BUTTON TO THE BODY TAG, BUT IT KILLED POPUP ENTIRELY, ADDED A WRAPPER, NO CIGAR.

解决方案

See this answer: https://stackoverflow.com/a/6144189/383904

---

jsBin demo

The simplest way:

 <a data-pop="1">Call popup 1</a>
  
 <div data-popup="1">
   <h2>
     Popup 1 title
     <span data-pop>&times;</span>
   </h2>
   <div>
     <p>Pop 1 description...</p>
     <button data-pop>OK</button>
   </div>
 </div>

CSS

/*** POPUP ***/
[data-popup] {
  display    : none;
  position   : fixed;
  z-index    : 9999;
  right      : 0;
  left       : 0;
  margin     : 45px auto;  
  width      : 50%;
  min-width  : 200px;
  padding    : 15px 25px 25px;
  background : #fff;
  transition: box-shadow 2s;
  box-shadow : 0 0 0 1900px hsla(220,7%,18%,0.6),
           0 10px 30px -5px hsla(220,7%,18%,0.6);
}

jQuery:

// /////
// POPUP

var $popup = $("[data-popup]"),
    pHov   = false;
$popup.hover(function(){ pHov^=1; });
$(document).mousedown(function(){
  if(!pHov) $popup.slideUp(240); 
});

$("[data-pop]").click(function(){
  var n = $(this).data('pop')
  var $popup = n ? $("[data-popup='"+n+"']") : $(this).closest("[data-popup]");
  $popup.slideToggle(240);
});

The above will only fail if you have underneath your Popup an element that on mousedown (not click, just mousedown) uses return false; or event.stopPropagation();, in that case the click will not bubble up the DOM to reach document that triggers the popup hide.
so a better solution to create a modal window that works implies the use of a full-screen parent overlay window that contains the Modal.

---

One of the common pitfalls creating modal / popups

---

Instead,

using a Modal-Parent window, all you need to do is register a click on that element in order to hide it (and his child Modal).
Than you can style that parent and add a nice opaque background or leave it transparent... it's up to your needs. Here's an example:

MODAL LIVE DEMO «

html

  <h1>Modal window Test</h1>
  
  <button class="modalOpen">SHOW MODAL</button>
  <p>Some paragraph...</p>
  
  <div id="modalOverlay">
    <div id="modal">
      <span class="modalClose">&times;</span>
      <h3>Modal</h3>
      <button>Some button to test inner propagation</button>
      <button class="modalClose">Close modal</button>
    </div>
  </div>

css

#modalOverlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.8);
}
#modal{
  position:relative;
  margin:100px auto;
  background:#fff;
  width:300px;
  padding:30px;
  box-shadow: 0 5px 50px -4px #aaa;
}
#modal span.modalClose{
  cursor:pointer;
  font-size:20px;
  position:absolute;
  right:20px;
  top:15px;
}

jquery

var $modalOverlay = $('#modalOverlay'); // Cache your selectors
var $modal        = $('#modal');
var $modalClose   = $('.modalClose');
var $modalOpen    = $('.modalOpen');

$modalOpen.click(function(){
  $modalOverlay.stop().fadeTo(500,1);
});

$modalOverlay.click(function(){
  $modalOverlay.stop().fadeTo(500,0, function(){ $(this).hide(); });
});

$modal.click(function( e ) {
   e.stopPropagation(); // otherwise the click would bubble up to the overlay
});

$modalClose.click(function(){
  $modalOverlay.click(); // simulate click to close modal
});

to summarize, as you can see from the code-idea above we didn't used document or body to listen for pop-up close clicks, we rely exclusively on the modal elements.

这篇关于如何创建自定义模式弹出窗口-以及如何在其外部单击以将其关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！