javascript - How to open a pop up when page loads using jquery? - Stack Overflow

admin管理员组

文章数量:1355045

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="wele"> </span>
</div>

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="wele"> </span>
</div>

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 16, 2017 at 5:50 Angel Politis 11.3k1515 gold badges5050 silver badges6767 bronze badges asked Dec 16, 2017 at 5:00 BabuBabu 13711 gold badge11 silver badge1717 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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./bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="//ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn./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>

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>       

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

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="wele"> </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)

The type of ponent you are looking for is often called a modal. These can be acplished using a bination 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.

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

本文标签： javascriptHow to open a pop up when page loads using jqueryStack Overflow