如何在使用jquery加载页面时打开弹出窗口?
问题描述:
如何在页面加载时打开弹出窗口?
How to open a pop up when page loads?
我希望在页面加载时弹出选择下拉框。
I want to my select drop down box as popup when page loads.
以下是我的HTML代码:
Below is my HTML code:
<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>
答
如果您希望它显示为弹出窗口,则全部你需要做的就是用一些基本的 CSS
来设置它,并用一些 JavaScript
添加一些功能。
If you want it to show as a popup, all you need to do is style it so with some basic CSS
and add some functionality with some JavaScript
.
代码段
/* ----- 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>
注意:
上面提供的示例使用最少的代码,因此功能最少。如果您不想从头开始创建弹出窗口的功能和外观,则可以始终使用外部库。以下是使用 jQuery
和 Bootstrap
:
代码段
/* ----- 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>