javascript 使用jquery加载页面时如何打开弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47842653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open a pop up when page loads using jquery?
提问by Babu
How to open a pop up when page loads?
页面加载时如何打开弹出窗口？
I want to my select drop down box as popup when page loads.
我希望我的选择下拉框在页面加载时弹出。
Below is my HTML code:
下面是我的 HTML 代码：
<div class="UserData">
<h1><a href="moviebooking.html">Booking</a></h1>
<select class="selectCity" id="selectCity" style="display:none;">
<option value="City">Select City</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Guntur">Guntur</option>
<option value="Ongole">Ongole</option>
</select>
<span id="welcome"> </span>
</div>
回答by Angel Politis
If you want it to show as a popup, all you need to do is style it so with some basic CSSand add some functionality with some JavaScript.
如果你想让它显示为一个弹出窗口，你需要做的就是用一些基本的样式来设计它，CSS并用一些JavaScript.
Snippet:
片段：
/* ----- JavaScript ----- */
window.onload = function () {
/* Cache the popup. */
var popup = document.getElementById("popup");
/* Show the popup. */
popup.classList.remove("hidden");
/* Fade the popup in */
setTimeout(()=>popup.classList.add("fade-in"));
/* Close the popup when a city is selected. */
document.getElementById("selectCity").onchange = function () {
/* Fade the popup out */
popup.classList.remove("fade-in");
/* Hide the popup. */
setTimeout(()=>popup.classList.add("hidden"), 300);
};
};/* ----- CSS ----- */
#popup {
display: inline-block;
opacity: 0;
position: fixed;
top: 20%;
left: 50%;
padding: 1em;
transform: translateX(-50%);
background: #fff;
border: 1px solid #888;
box-shadow: 1px 1px .5em 0 rgba(0, 0, 0, .5);
transition: opacity .3s ease-in-out;
}
#popup.hidden {
display: none;
}
#popup.fade-in {
opacity: 1;
}<!----- HTML ----->
<div id = "popup" class = "hidden">
<select class="selectCity" id="selectCity">
<option value="City">Select City</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Guntur">Guntur</option>
<option value="Ongole">Ongole</option>
</select>
</div>Note:The example provided above is made with minimal code and thus has minimal functionality. You can always use an external library, if don't feel like creating the functionality and appearance of the popup yourself from scratch. Here's a quick example below using jQueryand Bootstrap:
注意：上面提供的示例是用最少的代码制作的，因此功能最少。如果不想自己从头开始创建弹出窗口的功能和外观，您可以随时使用外部库。下面是一个使用jQueryand的快速示例Bootstrap：
Snippet:
片段：
/* ----- JavaScript ----- */
$(function () {
$("#custom-modal").modal("show");
});
/* Close the popup when the a selection is made */
$("#selectCity").on("change", function () {
$("#custom-modal").modal("hide");
});<!-- Libraries -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- A Bootstrap Modal -->
<div id="custom-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Select City</h4>
</div>
<div class="modal-body">
<select class="selectCity" id="selectCity">
<option value="City" disabled>Select City</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Guntur">Guntur</option>
<option value="Ongole">Ongole</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>回答by Malapati Suresh
You can add HTML for your popup and add styles to the same using CSS classes. Once done , you can use lightbox plugin from script to open up the pop up.
您可以为弹出窗口添加 HTML，并使用 CSS 类为其添加样式。完成后，您可以使用脚本中的灯箱插件打开弹出窗口。
<div class="popup">
<h3 class="forget-h3">Forgot Password</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
<!-- css -->
.popup { display:none; background:#000; width:300px; margin:0 auto;}
.popup p { font-size: 15px; font-weight: 300; line-height: 22px; color:#000; padding: 0 0 20px;}
.popup h3{font-size: 18px;line-height: 18px;color: #fff;display: block;font-weight: normal;padding: 0 0 30px;}
<!-- script -->
we have use is lightbox.js
<script>
$(document).ready(function(){
$('.popup').lightbox_me({
centered: true,
});
$ele.trigger('close');
e.preventDefault();
});
</script>
回答by Abhay Kumar
<div id="id0q" class="modal">
<div class="modal-content" style="width: 90% !important;">
<div class="col-md-12 Questions" style="margin:0px !important;">
<h3 style="margin-top: -9px; text-align: center;background-color: #7e15a5; color: #fff;">For Demo<button type="button" class="close" data-dismiss="modal" style=" margin: -7px -26px; font-size: 31px; color: #250631; ">×</button></h3>
</div>
</div>
</div>
<script type="text/javascript">
$(window).on('load',function(){
$('#id0q').modal('show');
});
</script>
回答by ferronsays
The type of component you are looking for is often called a modal. These can be accomplished using a combination of CSS for the styling and Javascript to open a close the modal-- by adding/removing a class and visibility style.
您正在寻找的组件类型通常称为modal. 这些可以通过使用样式的 CSS 和 Javascript 的组合来完成modal——通过添加/删除类和可见性样式来打开关闭。
回答by Stephanie Dover
The way you may want to look at this is instead of opening a popup on page load, you want the users to have the ability to close the modal (popup), or you may want it to open and then close after a few seconds.
您可能希望看到的方式不是在页面加载时打开弹出窗口，而是希望用户能够关闭模式（弹出窗口），或者您可能希望它在几秒钟后打开然后关闭。
HTML :
HTML :
<div class="UserData">
<i className="material-icons close">clear</i>
<h1><a href="moviebooking.html">Booking</a></h1>
<!--remove the display none-->
<select class="selectCity" id="selectCity">
<option value="City">Select City</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Guntur">Guntur</option>
<option value="Ongole">Ongole</option>
</select>
<span id="welcome"> </span>
</div>
CSS:
CSS：
/* this will open a full screen modal */
.UserData {
position: 'absolute';
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
z-index: 2;
}
.hide {
display: none !important;
}
The jQuery to have it default to open and let users close it, you can also add this to a submit button instead of the close icon:
jQuery 让它默认打开并让用户关闭它，你也可以将它添加到提交按钮而不是关闭图标：
$('.close').on('click', () => $('.UserData').toggleClass('hide'))
the jquery to have it open and then close after a 3 seconds:
jquery 打开它，然后在 3 秒后关闭：
//default is hidden
$('.UserData').hide()
$('.UserData').show(0).delay(3000).hide(0)
回答by Word Rearranger
Depends on what you mean by popup but you can simply use Jquery's $(document).ready and open an alert box:
取决于您所说的弹出窗口是什么意思，但您可以简单地使用 Jquery 的 $(document).ready 并打开一个警告框：
$(document).ready(function(){
alert("Test");
});
If you are looking for an actual pop-up window, take a look at Jquery-Confirm: https://craftpip.github.io/jquery-confirm/
如果您正在寻找实际的弹出窗口，请查看 Jquery-Confirm：https: //craftpip.github.io/jquery-confirm/
If this is not what you are looking for please give us more information on what you are trying to accomplish so we can better help.
如果这不是您要查找的内容，请向我们提供有关您要完成的任务的更多信息，以便我们更好地提供帮助。
If you mean that you need the selected item in the dropdownlist then use Jquery this way:
如果您的意思是您需要下拉列表中的所选项目，请以这种方式使用 Jquery：
$(document).ready(function(){
//Get the selected text
var selectedCityText = $('#selectCity :selected').text();
alert(selectedCityText);
//Or
//Get the selected value
var selectedCityValue = $('#selectCity :selected').val();
alert(selectedCityValue);
});
