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/

问候

我想用PHP脚本中的联系表单创建自动弹出窗口

1 个答案: