¿Cómo crear una ventana emergente de diálogo 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 un botón emergente de Diálogo 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”></script>

Ejemplo: Crearemos un cuadro de diálogo que se puede colocar en una ventana emergente. Agregaremos el atributo data-dismissible=”false” para evitar que la ventana emergente se cierre cuando el usuario haga clic fuera del cuadro de diálogo.

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 Dialog popup using jQuery Mobile
        </h4>
  
        <a href="#DialogBox" data-rel="popup" 
            data-position-to="window" data-transition="pop"
            class="ui-btn ui-corner-all ui-shadow ui-btn-inline 
            ui-icon-delete ui-btn-icon-left ui-btn-b">
            Remove page...
        </a>
          
        <div data-role="popup" id="DialogBox" 
            data-overlay-theme="b" data-theme="b" 
            data-dismissible="false"
            style="max-width:400px;">
              
            <div data-role="header" data-theme="a">
                <h1>Remove Page?</h1>
            </div>
              
            <div role="main" class="ui-content">
                <h3 class="ui-title">
                    Are you want to remove GeeksforGeeks page?
                </h3>
                  
                <a href="#" class="ui-btn ui-corner-all 
                    ui-shadow ui-btn-inline ui-btn-b" 
                    data-rel="back">Cancel
                </a>
                  
                <a href="#" class="ui-btn ui-corner-all 
                    ui-shadow ui-btn-inline ui-btn-b" 
                    data-rel="back" data-transition="flow">
                    Remove
                </a>
            </div>
        </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 *