在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/