Question

在某些网站上，当某个链接如＆＃34;阅读更多＆＃34;单击，将出现一个弹出框，后面的网页通常会变暗。然后弹出框包含信息，可以通过单击角落中的按钮来关闭。

我想制作其中的几个。我是否只是通过创建一个div而另一个具有透明度的人来实现这一目标＆＃34;变暗＆＃34;弹出窗口后面的网页还是我可以在javascript中使用的代码？

Answer 1

如果你自己动手，你可以在整个页面上叠加并给它一个高z-index，这样它就会覆盖你所有的dom元素。然后有一个div，它有一个更高的z-index，你需要它与你想要的内容。

更简单的方法是使用已经在

中创建该功能的库

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

bootstrap modal - http://getbootstrap.com/javascript/#modals

Answer 2

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

Answer 3

您正在寻找的是灯箱/模态盒子。我推荐Magnific Popup，因为它适用于响应式设计，但colorbox也非常好。

Answer 4

你基本上希望使用模态。 Zurb提供了一个图书馆，可以为您提供基础。该库被称为揭示。它使用起来很简单。我用得很好。你可以在这里看到它。希望有所帮助。

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

Answer 5

此代码应该按照您的要求执行

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 6

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

最受欢迎的是bootstrap

http://getbootstrap.com/

Answer 7

一般来说，这里的人建议使用lightboxes，这对于画廊非常有效，但对于这样的信息框来说完全矫枉过正。灯箱可以减慢您的网站速度，因为它们需要包含大量资产，对.css文件和.js文件的多个HTTP请求，当您的问题可以通过CSS和JS解决时。

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

在您的代码中，您有一个简单的div类modal-dialog，它会自动隐藏在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片段用于调用模态对话框的特定实例，允许您使用不同的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"); 
});

如何在点击网站上显示信息框

7 个答案: