wordpress 站点中纯自定义 html 表单弹出窗口

Question

我需要在我的主页（Wordpress 网站）上的弹出窗口中显示一个表单。这是我自己的表格，而不是联系人 7 或其他东西。

我想要一个弹出式插件或可以在我的主页上执行相同操作的代码。我尝试了很多插件，但有些插件有自己的表单设计，这不给我添加表单的功能。

我需要一个纯 HTML 好看的弹出窗口。

Answer 1

您可以使用 JQuery 的“对话框”打开带有表单的弹出窗口。

只需将您的表单嵌入一个带有 id 的 div 并将其转换为对话框。

HTML

<button type="button" id="but" >Open Popup</button>

<div id="dialogForm">
    <form id="myform" method="post">
        Name:
        <input type="text"/><br/>
        Phone:
        <input type="text"/><br/>
        <button type="submit"> Submit </button>
    </form>
</div>

JavaScript

$('#but').click(function() {
    $("#dialogForm").dialog("open");
});
    $("#dialogForm").dialog({
        modal: true,
        autoOpen: true,
        show: {effect: "blind", duration: 800}
    });   

用于在加载主页时加载对话框的 JavaScript 请注意，'autoOpen' 设置为 true。

$(window).load(function() {

    $("#dialogForm").dialog({
        modal: true,
        autoOpen: true,
        show: {effect: "blind", duration: 800}
    });
});

这是小提琴：http : //jsfiddle.net/sve3Lmje/

无需单击即可打开对话框的小提琴：http : //jsfiddle.net/sve3Lmje/1/