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

how to display pop-up contact form without using iframe and using a tag

本文关键字：情况下 显示 弹出式 表单 联系 标签 iframe      更新时间：2023-09-26

这是我的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>

我可以知道，如何显示这个联系我们的形式弹出，也点击外面它应该关闭。我在这段代码中的错误。你能帮我吗?

为了满足"click outside it should be close "的要求，你将需要一些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/

相关文章：