In this tutorial we will see how can we make bootstrap modal draggable and resizable by using jqueryUI.
It is very easy to do by using jquery ui and little bit of tricky code to work with when it comes to do it.
Lets get started.
Resizable and Draggable By Using jQueryUI
Prepare the html page with jquery, jquery ui and bootstrap
|
1 2 3 |
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/jquery-ui.css"> |
Create bootstrap modal inside page with class="in" and style="display:block" to make it visible even without clicking any button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="modal in" id="modal-id" style="display:block"> <div class="modal-dialog" id="movableDialog"> <div class="modal-content" id="resizableContent"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Resizable and Draggable Modal With jQuery UI</h4> </div> <div class="modal-body"> <p>1. Click and drag to move the modal box anywhere inside the browser</p> <p>2. Click the resizabe icon just below the save changes button and resize</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> |
Now, comes the JavaScript to drag modal anywhere on the webpage.
|
1 2 3 |
$('#movableDialog').draggable({ handle: ".modal-header" }); |
For Resizable,
|
1 2 3 4 |
$('#resizableContent').resizable({ minHeight: 200, // Minimum height of a resizing modal minWidth: 200 // Minimum width of resizing width }); |
Little bit of styling to change the cursor while dragging.
|
1 2 3 |
.modal-title { cursor: move; } |
The Final Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Modal Draggable and Resizable Demo</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/bootstrap-theme.min.css" /> <link rel="stylesheet" href="css/jquery-ui.css" /> <style> .modal-title { cursor: move; } </style> </head> <body> <div class="modal in modal-resize modal-drag" id="modal-id" style="display:block"> <div class="modal-dialog" id="movableDialog"> <div class="modal-content" id="resizableContent"> <div class="modal-header modal-drag-handle"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Resizable and Draggable Modal With jQuery UI</h4> </div> <div class="modal-body"> <p>1. Click and drag to move the modal box anywhere inside the browser</p> <p>2. Click the resizabe icon just below the save changes button and resize</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> // For Moving $('#movableDialog').draggable({ handle: ".modal-header" }); // For Resizing $('#resizableContent').resizable({ minHeight: 200, minWidth: 200 }); </script> </body> </html> |
Click here to have a demo.
Leave a Reply