2

我有一个完整的页面覆盖覆盖我的页面加载。我附加的唯一脚本是在单击任何内容时关闭它。此叠加层的目的是对页面进行说明，因此我有一些透明的 .png 图像，我想将它们锚定到页面的不同区域。

我在下面列出了一个示例，我希望它具有完全的不透明度并且与页面的左上角有一些间距......但是当我加载它时，它设置为 0.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>
4

2 回答 2

5

我会从 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/

于 2013-08-15T14:31:10.647 回答
0

您是否考虑过使用 JQueryUI 模态弹出窗口？您可以隐藏标题并将其自定义为您想要的方式。 http://jqueryui.com/dialog/

于 2013-08-15T14:53:40.090 回答