0

作为我正在尝试做的艺术项目的一部分，我想实现一个不可关闭的弹出窗口。我正在研究一个框的概念（我已经在 CSS 中制作），单击它会打开一个无法关闭的弹出窗口，除非用户执行所需的操作（在这种情况下：在画布上绘图）。我希望有一个按钮，点击时：1）关闭弹出窗口。2) 强制将图纸下载到计算机。

我设法制作了一个弹出窗口（尺寸正确，位置正确等）。我还制作了一个按钮，单击该按钮会关闭弹出窗口。但是，当用户尝试单击角落中的红色 X 时，我似乎仍然无法让弹出窗口保持不变......我注意到无法关闭的弹出窗口在 Chrome 中并不能真正工作，但我仍然希望它是理论上无法关闭，因为它对理解我的艺术至关重要。

除非用户提交他/她的“绘画艺术”，否则我怎样才能让它不断回来？

提前致谢！非常感激。如果代码有效，我一定会在上面写上你的名字。

PS：如果有人知道任何会强制从画布下载绘图的代码，那将非常感激。现在，我只能转到另一个页面，我们必须右键单击 --> 将图像另存为 --> 等

谢谢！:)

4

1 回答 1

2

您无法真正创建“无法关闭”的弹出窗口。但是，您可以用灯箱覆盖整个页面。作为概念证明，我在 jQuery 的帮助下将其结合在一起。这是非常基本的，需要相当多的命名空间/清理/等。http://jsfiddle.net/CJCQQ/

CSS：

#page-cover {
    background-color: #888; 
    display: none; 
    position: absolute; 
    width: 100%; 
    height: 100%
}
#uncloseable-lightbox {
    background-color: #000;
    height: 200px;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 500px;
}
#uncloseable-lightbox button { position: absolute }
#uncloseable-lightbox #close-button { top: 10px; right: 10px;}
#uncloseable-lightbox #click-first-button { bottom: 10px; left: 10px;}

HTML：

<div id="page-cover">
    <div id="uncloseable-lightbox">
        <button id="close-button">close</button>
        <button id="click-first-button">Click Me First</button>
    </div>
</div>
<button id="open-button">Open</button>

JS：

$(document).ready(function () {
    var outerThis = this, canClose = false;
    $('#open-button').on('click', function (e) {
        e.preventDefault();
        $('#page-cover').show();
    });

    $('#close-button').on('click', function (e) {
        e.preventDefault();
        if(outerThis.canClose) {
            $('#page-cover').hide();
            outerThis.canClose = false;
        }
    });

    $('#click-first-button').on('click', function (e) {
        outerThis.canClose = true;
    });
});
于 2013-03-03T09:18:12.183 回答