Cómo abrir un pop-up cuando la carga de la página con jquery?

Cómo abrir un pop-up cuando la carga de la página?

Quiero a mi seleccione desplegable del cuadro como ventana emergente cuando se carga la página.

A continuación es mi código 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>

OriginalEl autor Babu | 2017-12-16

4 Kommentare

  1. 0

    Depende de lo que quieres decir a través de ventanas emergentes, pero usted puede simplemente utilizar Jquery $(document).listo y se abre un cuadro de alerta:

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

    Si usted está buscando una verdadera ventana pop-up, echa un vistazo a Jquery-Confirmar: https://craftpip.github.io/jquery-confirm/

    Si esto no es lo que usted está buscando, por favor nos dan más información sobre lo que usted está tratando de lograr, a lo mejor podemos ayudar.

    Si te refieres a la que necesita el elemento seleccionado en el desplegable, a continuación, utilizar Jquery de esta manera:

    $(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);
    });
    mi primera página es la página de inicio de sesión después de que se va a esta página cuando este está abierto mostrar el menú emergente y seleccione la lista desplegable de la ciudad seleccionada se mostrará doc info
    Me gustaría ver en Jquery-Confirmar. Puede fácilmente crear una ventana emergente con el contenido que desea. En que el contenido juste poner el código html que ya tiene para el dropdownlist. Entonces, cuando usted haga clic en el botón de confirmación de la ventana emergente de mantener la ciudad seleccionada en un hiddenfield y utilizarla en tu página.

    OriginalEl autor Nicholas Thérien Roussel

  2. 0

    La forma en que usted puede desear mirar en esto es en lugar de abrir una ventana emergente en la carga de la página que desee que los usuarios tienen la capacidad de cerrar el modal (ventana emergente), o puede que desee abrir y, a continuación, cierre después de un par de segundos.

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

    El jQuery para tenerlo por defecto para abrir y dejar que los usuarios cerca de él, usted puede también agregar esto a un botón de enviar en lugar del icono cerrar:

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

    el jquery abrir y, a continuación, cierre después de 3 segundos:

    //default is hidden
    $('.UserData').hide()
    
    $('.UserData').show(0).delay(3000).hide(0)

    OriginalEl autor Stephanie Dover

  3. 0

    El tipo de componente que se está buscando es a menudo llamado un modal. Esto puede conseguirse mediante una combinación de CSS para el estilo y Javascript para abrir una cerca de la modal — mediante la adición/eliminación de una clase y la visibilidad de estilo.

    Aquí está un ejemplo sencillo.

    OriginalEl autor ferronsays

  4. 0
    <!-- 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>       

    => en Primer lugar tenemos el código del diseño en html y css, después de que el uso de script js lightbox.js

    que emergente cuando la carga de abrir la página, el nombre de la clase de uso en el script jquery

    Agregar una descripción para su respuesta.

    OriginalEl autor Suresh

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea