如何在使用 jquery 加载页面时打开弹出窗口？

Question

如何在页面加载时打开弹出窗口？

我想在页面加载时将我的选择下拉框弹出。

下面是我的 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>

原文由 Babu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您希望它显示为弹出窗口，您需要做的就是使用一些基本的 CSS 对其进行样式设置，并使用一些 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">&times;</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>

原文由 Angel Politis 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以为弹出窗口添加 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>

原文由 Malapati Suresh 发布，翻译遵循 CC BY-SA 4.0 许可协议