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

Question

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:

<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

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 .

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 jQuery and 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">&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>

Answer 2

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.

Here is a simple example.

Answer 3

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 :

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

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:

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

the jquery to have it open and then close after a 3 seconds:

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

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

Answer 4

Depends on what you mean by popup but you can simply use Jquery's $(document).ready and open an alert box:

$(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/

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:

$(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);
});

Answer 5

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.

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

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>