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

Question

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

我正在尝试一些代码，但在单击按钮后它会弹出表单（效果很好）。现在我正在尝试创建不需要任何按钮的自动弹出窗口...

我的 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 代码。这里就不提了。

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

Answer 1

您需要在页面 (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/

问候