Redimensionable & diálogo draggable en JavaScript puro
| Autor: | ZulNs |
|---|---|
| Views Total: | 402 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 10, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
A vanilla JavaScript library to create a draggable & resizable dialog popup without any frameworks or libraries (e.g. jQuery UI).
Para moverlo, arrastre desde la barra de título del cuadro de diálogo.
Para cambiar el tamaño, arrastre desde cualquier borde o cualquier esquina del cuadro de diálogo.
Funcionamiento
Importar la hoja de estilo draggable-Resizable-Dialog. CSS y JavaScript draggable-Resizable-Dialog. js en el documento.
<link rel="stylesheet" href="draggable-resizable-dialog.css"> <script src="draggable-resizable-dialog.js"></script>
Cree el código HTML para el cuadro de diálogo.
<div class="dialog" style="width:480px; height:240px;"> <div class="titlebar">Dialog Title...</div> <button>Close</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="buttonpane"> <div class="buttonset"> <button>OK</button> <button>Cancel</button> </div> </div> </div>
Habilite un botón para alternar el cuadro de diálogo.
<button id="show-dialog" onclick="_showDialog();">Show Dialog</button>
