gpt4 book ai didi

javascript - 我想在 php 脚本中创建带有联系表单的自动弹出窗口

转载 作者:行者123 更新时间:2023-12-03 08:13:17 24 4
gpt4 key购买 nike

我想创建一个自动弹出的联系表单。当用户访问我的网站时...自动显示弹出表单。

我正在尝试一些代码,但单击按钮后它会弹出表单(工作正常)。现在我正在尝试创建自动弹出窗口而不需要任何按钮...

我的 html 文件在这里

<html>
<head>
<title>Popup contact form</title>
<link href="elements.css" rel="stylesheet">
<script src="my_js.js"></script>
</head>
<!-- Body Starts Here -->
<body id="body" style="overflow:hidden;">
<div id="abc">
<!-- Popup Div Starts Here -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/3.png" onclick ="div_hide()">
<h2>Contact Us</h2>
<hr>
<input id="name" name="name" placeholder="Name" type="text">
<input id="email" name="email" placeholder="Email" type="text">
<textarea id="msg" name="message" placeholder="Message"></textarea>
<a href="javascript:%20check_empty()" id="submit">Send</a>
</form>
</div>
<!-- Popup Div Ends Here -->
</div>
<!-- Display Popup Button -->
<h1>Click Button To Popup Form Using Javascript</h1>
<button id="popup" onclick="div_show()">Popup</button>
</body>
<!-- Body Ends Here -->
</html>

我的java脚本文件看起来像这样

// Validating Empty Field
function check_empty() {
if (document.getElementById('name').value == "" || document.getElementById('email').value == "" || document.getElementById('msg').value == "") {
alert("Fill All Fields !");
} else {
document.getElementById('form').submit();
alert("Form Submitted Successfully...");
}
}
//Function To Display Popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}

我有一些CSS代码。这里我就不提了。

如何创建不需要任何按钮的自动弹出表单?

最佳答案

您需要在页面(DOM)加载后调用“弹出方法”:

http://www.w3schools.com/jsref/dom_obj_document.asp

jQuery:

$(document).ready(function(){
div_show();
}

原生 JS:

document.addEventListener("DOMContentLoaded", function(event) { 
div_show();
});

您可能感兴趣的更多链接:

$(document).ready equivalent without jQuery

http://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

https://jqueryui.com/dialog/

问候

关于javascript - 我想在 php 脚本中创建带有联系表单的自动弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34056820/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com