javascript - 如何使信息框在点击时出现在网站上

Question

在某些网站上，点击“阅读更多”等链接时，会出现弹框，后面的网页往往会变黑。然后弹出框包含信息，可以通过单击 Angular 落的按钮将其关闭。

我想做几个。我会简单地通过创建一个 div 来做到这一点，也许另一个具有透明度的 div 可以使弹出窗口后面的网页“变暗”，或者是否有我可以在 javascript 中使用的代码？

Answer 1

一般来说，这里的人建议使用 灯箱，这对于画廊来说效果很好，但对于像这样的信息框来说完全矫枉过正。灯箱可能会使您的网站变慢很多，因为它们需要包含大量 Assets 、对 .css 文件和 .js 文件的多个 HTTP 请求，而您的问题可能是通过 CSS 和 JS 解决。

看看这个 fiddle :http://jsfiddle.net/3vmL6/1/

在您的代码中，您有一个简单的 div 类 modal-dialog，它自动隐藏在 css 中(参见 fiddle )。

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