¿Cómo crear una ventana emergente de cierre usando jQuery Mobile?

jQuery Mobile es una tecnología basada en la web que se utiliza para crear contenido receptivo al que se puede acceder en todos los teléfonos inteligentes, tabletas y computadoras de escritorio. En este artículo, crearemos una ventana emergente de cierre usando jQuery Mobile.

Enfoque: agregue los scripts jQuery Mobile necesarios para su proyecto.

<enlace rel=”hoja de estilo” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code .jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>

Crearemos una ventana emergente que contiene un botón de cierre. El botón de cierre se puede colocar arriba a la izquierda o arriba a la derecha u otros lugares según las clases. La ventana emergente se puede cerrar haciendo clic fuera del widget emergente o presionando la tecla Esc . El atributo data-dismissible=”false” se usa para evitar que se cierre la ventana emergente cuando el usuario hace clic fuera del cuadro emergente. 

Ejemplo 1: Crearemos una ventana emergente que contenga un botón de cierre en la esquina superior derecha .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  
    <script src=
        "http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
  
    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <h4>
            Design a Popup with right close 
            button using jQuery Mobile
        </h4>
  
        <a href="#CloseRightPopup" data-rel="popup" 
            class="ui-btn ui-corner-all ui-shadow ui-btn-inline">
            Popup with Right close button
        </a>
  
        <div data-role="popup" id="CloseRightPopup" 
            class="ui-content" style="max-width:280px">
            <a href="#" data-rel="back"
                class="ui-btn ui-corner-all ui-shadow 
                ui-btn-a ui-icon-delete ui-btn-icon-notext 
                ui-btn-right">
                Close
            </a>
  
            <p>
                It is an example of popup with 
                closing of top-right corner.
            </p>
        </div>
    </center>
</body>
  
</html>

Producción:

Ejemplo 2: Crearemos una ventana emergente que contenga un botón de cierre en la esquina superior izquierda .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=   
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  
    <script src=
        "http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
  
    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <h4>
            Design a Popup with left close
            button using jQuery Mobile
        </h4>
  
        <a href="#CloseLeftPopup" 
            data-rel="popup" 
            class="ui-btn ui-corner-all ui-shadow 
            ui-btn-inline">
            Popup with Left close button
        </a>
              
        <div data-role="popup" id="CloseLeftPopup" 
            class="ui-content" style="max-width:280px">
            <a href="#" data-rel="back"
                class="ui-btn ui-corner-all ui-shadow 
                ui-btn-a ui-icon-delete ui-btn-icon-notext 
                ui-btn-left">
                Close
            </a>
  
            <p>
                It is an example of popup with 
                closing of top-left corner.
            </p>
        </div>
    </center>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por ppatelkap y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *