Question

这是我的HTML代码

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Modal Popup</title>

    <body>
    <a href="https://dev88.wufoo.com/forms/ze7xusq0j2tum9/" onclick="window.open(this.href,  null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Please fill out my form.</a>

    </body>
    </html>

我可以知道，如何显示此联系我们表单弹出窗口并单击外面它应该关闭。我在这段代码中的错误。你能帮助我吗？

Answer 1

为了满足“在外面点击它应该关闭”的要求，你需要一些JS来跟踪窗口何时打开和关闭。当您从父页面打开窗口时，它将打开一个弹出窗口，如果再次单击父页面，当窗口仍然打开时，弹出窗口将关闭。

<script>
    var test = document.getElementById('test');
    var win = null;

    test.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();

        win = window.open(test.href,  null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
        return false;
    });

    window.addEventListener('click', function(e) {
        if(win != null) {
            win.close();
            win = null;
        }
    });
</script>

...

<a href="https://dev88.wufoo.com/forms/ze7xusq0j2tum9/" id="test">Please fill out my form.</a>

工作演示：http://jsfiddle.net/spryno724/b857X/2/

如何在不使用iframe和使用标签的情况下显示弹出联系表单

1 个答案: