Question

我有一个完整的页面覆盖覆盖我的页面加载。我附加的唯一脚本是在点击任何内容时关闭它。这个叠加层的目的是为了页面的指导，所以我有一些透明的.png图像，我想锚定到页面的不同区域。

我在下面列举了一个例子，我希望它具有完全不透明度，并且距离页面的左上角有一些间距...但是当我加载它时，它设置为.4透明度并且它被卡住了左上角。我不是css专家，我一直用这个旋转我的车轮。有人可以帮忙吗？

<script language="javascript" type="text/javascript">

    $(function () {

        var docHeight = $(document).height();

        $("body").append("<div id='overlay'><div id='home_text'><img src='/images/overlay_test_home.png'></div></div>");

        $("#overlay")
      .height(docHeight)
      .css({
          'opacity': 0.4,
          'position': 'absolute',
          'top': 0,
          'left': 0,
          'background-color': 'black',
          'width': '100%',
          'z-index': 5000
      });

        $("#home_text")
      .css({
          'opacity': 1.0,
           'top' : 20,
           'left': 200
      });

        $('#overlay').click(function () {
            $("#overlay").hide();
        });

    });

</script>

Answer 1

我会从javascript中删除所有html和css，这将使其更易于维护。

这是你的css：

#overlay {
    background: rgba(0, 0, 0, .4);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

#home_text {
    background: red;
    height: 300px;
    margin: 20px auto 0;
    width: 300px;
}

在叠加层上，我将不透明度更改为rgba，因为不透明度会影响其中的所有内容。所有浏览器也不支持Rgba，因此您可以使用后备透明png，Modernizr非常适合支持检查。同时删除了叠加层上的高度设置，并将左下角和左下角设置为0.您可以根据自己的喜好更改home_text定位我不确定它应该是什么样子，所以我把它做成了一个红色的框。

这是你的html：

<div id="overlay">
    <div id="home_text">
        <!-- your image -->
    </div>
</div>

这是你清理js：

$(function () {
    var $overlay = $('#overlay');
    $overlay.on('click', function (e) {
        $overlay
            .hide()
            .off();
    });
});

off方法删除该事件。

这里可以看到一个例子：http://jsfiddle.net/SHBXd/1/

Answer 2

您是否考虑过使用JQueryUI模式弹出窗口？您可以隐藏标题并根据需要进行自定义。 http://jqueryui.com/dialog/

如何在整页半透明叠加div的顶部控制图像的CSS

2 个答案: