我想用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等同于没有jQuery

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

https://jqueryui.com/dialog/

问候