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

Posted 2023-03-05

【中文标题】wordpress 站点中的纯自定义 html 表单弹出窗口

【英文标题】：Purely custom html form popup in wordpress site

【发布时间】：2015-01-29 03:00:58

【问题描述】：

我需要在我的主页（Wordpress 网站）上弹出一个表单。这是我自己的表格，而不是联系人 7 或其他什么。

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

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

【问题讨论】：

popup 有很多可用的插件，但是对于您的自定义表单，您必须自定义插件或需要使用自定义 java 脚本和 html 来实现您的弹出目标..

【参考方案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/

【讨论】：

我们可以在不点击的情况下打开它吗？我希望它直接加载到主页上。

是的。只需调用 $("#dialogForm").dialog("open");在页面加载时。当然，将 div 设置为对话框（即第 4 行）的代码也应包含在加载时

检查第二个小提琴的编辑，它在页面加载时打开对话框而不点击任何按钮

当我在同一页面中进行潜水和编写脚本时，该 div 表单将直接出现在页面上（而不是在弹出窗口中），而无需调用任何函数。我想知道在哪里放置 html 代码以及在我现有主页中放置脚本代码的位置，以便我的表单仅显示为弹出窗口而不出现在我的主页中

我已经用代码更新了我的答案，以便在加载主页时自动加载对话框。确保您拥有 JQuery 库。