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>

Answer 1

如果您希望它显示为弹出窗口，您只需要使用一些基本的CSS来设置样式，并使用一些JavaScript添加一些功能。

<强>段：

＆＃13;

/* ----- 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);
  };
};

＆＃13;

/* ----- 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;
}

＆＃13;

<!----- 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>

＆＃13;

注意：上面提供的示例使用最少的代码，因此具有最小的功能。您可以随时使用外部库，如果您不想从头开始创建弹出窗口的功能和外观。以下是使用jQuery和Bootstrap的简短示例：

<强>段：

＆＃13;
＆＃13;
/* ----- JavaScript ----- */ $(function () { $("#custom-modal").modal("show"); }); /* Close the popup when the a selection is made */ $("#selectCity").on("change", function () { $("#custom-modal").modal("hide"); });
＆＃13;
 <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>  <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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您要查找的组件类型通常称为modal。这些可以通过组合使用CSS进行样式化和Javascript来打开关闭modal - 通过添加/删除类和可见性样式来实现。

Here is a simple example.

Answer 3

您可能想要查看此内容的方式是在页面加载时不打开弹出窗口，而是希望用户能够关闭模式（弹出窗口），或者您可能希望它在打开后关闭几秒钟。

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：

/* 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;
}

jQuery默认打开并让用户关闭它，你也可以将它添加到提交按钮而不是关闭图标：

$('.close').on('click', () => $('.UserData').toggleClass('hide'))

jquery让它打开然后在3秒后关闭：

//default is hidden
$('.UserData').hide()

$('.UserData').show(0).delay(3000).hide(0)

Answer 4

取决于弹出窗口的含义，但您只需使用Jquery的$（文档）.ready并打开一个警告框：

maxClique.py

如果您正在寻找实际的弹出窗口，请查看Jquery-Confirm：https://craftpip.github.io/jquery-confirm/

如果这不是您想要的，请告诉我们您要完成的更多信息，以便我们提供更好的帮助。

如果您的意思是您需要下拉列表中的所选项目，请以这种方式使用Jquery：

$(document).ready(function(){
   alert("Test");
});

Answer 5

<!-- Html -->

<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>

=＆GT;首先，在脚本js lightbox.js

中使用后，我们对设计html和css进行了编码

加载打开页面时弹出，该类名在jquery脚本中使用

Answer 6

<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; ">&times;</button></h3> 
   </div>
    </div>
</div>  
<script type="text/javascript">
    $(window).on('load',function(){
        $('#id0q').modal('show');
    });
</script>

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

6 个答案: