显示“看不见”和“模态”对话框 - javascript、jQuery答案

【问题标题】：Show "Unseen" & "modal" dialog - javascript, jQuery显示“看不见”和“模态”对话框 - javascript、jQuery
【发布时间】：2014-02-14 06:25:32
【问题描述】：

我想在 javascript 中显示“看不见的”“模态”对话框。这听起来很奇怪，但是，我想要“模态”对话框的效果，即使背景不可控和阴影颜色。但是，我不想显示对话框弹出窗口。所以，我想我是否可以通过显示“看不见”、“模态”对话框来做到这一点。这可能吗？

我找不到可以做我想做的事情的类似问题和良好的对话框属性。

【问题讨论】：

你可以只做一个覆盖整个页面的透明元素。
但是，如果我这样做，我感觉整个页面都变成了白色？？我想做一些事情，比如在整个页面上放置阴影覆盖。而且，“不可控”很重要
所以让它透明。 uncontrollable 是什么意思？
对不起，我明白了。所以，也许我可以使用“叠加”。 “不可控”意味着如果我们弹出“模态”对话框，用户无法点击阴影屏幕后面的某些按钮。

标签： javascript jquery modal-dialog

【解决方案1】：

您可以在不创建模式的情况下执行此操作，方法是添加一个表示页面高度和宽度的 div 并将其放置在顶部： http://jsfiddle.net/2cuRX/

$(function () {
    $('#overlayBtn').on('click', function () {
        $("body").append("<div id='overlay'></div>");
        $("#overlay").height($(document).height())
            .css({
            'opacity': 0.4,
                'position': 'absolute',
                'top': 0,
                'left': 0,
                'background-color': 'black',
                'width': '100%',
                'z-index': 5000
        });
    });
});

【讨论】：