如何使信息框显示在单击的网站上

Question

在某些网站上，单击“更多”之类的链接时，会出现一个弹出框，并且后面的网页通常会变暗。 然后，弹出框包含信息，可以通过单击角落的按钮将其关闭。

我想做几个。 我会简单地通过创建一个div并可能另一个透明地“弹出”弹出窗口后面的网页来做到这一点，还是可以在JavaScript中使用代码？

Answer 1

如果您自己进行操作，则可以在整个页面上放置一个叠加层，并为其赋予较高的z索引，以使其覆盖所有dom元素。 然后有一个div，将z-index较高的位置放置在所需的内容中。

一种更简单的方法是使用已经具有该功能的库

jQuery UI对话框-http://jqueryui.com/dialog/

引导程序模式-http: //getbootstrap.com/javascript/#modals

Answer 2

我相信这就是您要寻找的东西： http : //www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

Answer 3

您正在寻找的是灯箱/模式框。 我建议使用Magnific Popup，因为它可以使用响应式设计，但是colorbox也非常好。

Answer 4

通常，这里的人们都建议使用lightboxes ，该lightboxes对画廊非常有用，但对于像这样的信息箱来说却是完全过时了。 当您的问题可以通过CSS和JS解决时，灯箱会大大降低您的网站速度，因为它们需要包含很多资产，对.css文件和.js文件的多个HTTP请求。

看看这个小提琴： http : //jsfiddle.net/3vmL6/1/

在您的代码中，您有一个modal-dialog类的简单div ，它自动隐藏在css中（请参见小提琴）。

<div id="info-modal" class="modal-dialog">
<div>
  <a href="#close" title="Close" class="close">x</a>
  <h2>Hello!</h2>
  <p>You can display any information you want here!</p>
</div>

文档中的一个简单的JQuery片段用于调用modal-dialog的特定实例，从而允许您使用不同的ID拥有多个唯一的div ，但它们都属于同一类。

$("#click-me").click(function () {

$.ajax({
    success: function (data) {                               
        console.log(data);   
        $('#info-modal').addClass("show"); 
    },
    async: true
    });    
});

$(".modal-dialog .close").click(function(){
    $(this).closest(".modal-dialog").removeClass("show"); 
});

Answer 5

您本质上是希望使用模态。 Zurb提供了一个可以在基础上为您完成此操作的库。 该库称为揭示。 使用简单。 我很好用。 在这里你可以看到它。 希望能有所帮助。

http://zurb.com/playground/reveal-modal-plugin

Answer 6

此代码应执行您的要求

window.onload = function() {
        document.getElementById("member").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
            };
<div id="overlay">
</div>
<div id="popup">
your readme text in here 
</div>
#overlay
{
display:none;    
position:fixed; 
left:0px;       
top:0px;         
width:100%;      
height:100%;     
background:#000; 
opacity:0.5;     
z-index:99999;
}
#popup
{
display:none;
position:fixed;
left:40%;           
top:40%;             
width:600px;         
height:500px;
margin-top:-75px;   
margin-left:-150px;  
background:#FFFFFF;  
border:2px solid #000;  
z-index:100000;
}

Answer 7

它们被称为模式或对话框，在这种情况下，有几个框架可以为您提供帮助。

最受欢迎的之一是自举

http://getbootstrap.com/