Create modal dialog form in jquery using bootstrap framework, slightly different from the usual way of jquery-ui. In bootstrap tutorial, we create modal dialog form like the example below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </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> |
Some of the rules on the use of the bootstrap modals as quoted on the bootstrap’s official website is as follows
Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.Modal markup placement
Always try to place a modal’s HTML code in a top-level position in your document to avoid other components affecting the modal’s appearance and/or functionality.Mobile device caveats
There are some caveats regarding using modals on mobile devices.
Let’s try to create a dynamic modal form in the bootstrap
1. Make sure you have adminLTE bootstrap template, please download from the official website.
2. In bootstrap, we have 3 optional modal form dialog sizes (Large,Standart,Small).
3. There are 3 classes in the modal-dialog content creation
1 2 3 | <div class="modal-header"></div> <div class="modal-body"></div> <div class="modal-footer"></div> |
4. Create php file as modals.php and copy this code below
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 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Dynamic modal dialog form bootstrap</title> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="../font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" /> </head> <body class="skin-black"> <?php include "layout/header.php" ?> <div class="wrapper row-offcanvas row-offcanvas-left"> <?php //include "layout/left_sidebar.php" ?> <aside class="right-side"> <section class="content-header"> <h1> How to create Dynamic modal dialog form bootstrap </h1> </section> <section class="content" > <div class="box box-primary"> <div class="row"> <div class="col-md-2"> <select class="form-control" id="mysize"> <option value="small">Small</option> <option value="standart">Standart</option> <option value="large">Large</option> </select> </div> </div><br/> <div class="row"> <div class="col-md-4"> <button type="button" class="btn btn-primary btn-lg" onClick="open_container();" > Launch demo modal</button> </div> </div> <!-- Modal form--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog "> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"></h4> </div> <div class="modal-body" id="modal-bodyku"> </div> <div class="modal-footer" id="modal-footerq"> </div> </div> </div> </div> <!-- end of modal ------------------------------> </div> </section><!-- /.content --> </aside><!-- /.right-side --> </div><!-- ./wrapper --> <script src="../js/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="../js/bootstrap.min.js" type="text/javascript"></script> <script src="../js/AdminLTE/app.js" type="text/javascript"></script> </body> </html> |
To create dynamic modal dialog form ,we need create javascript function , copy this javascript code in above “</body>” 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 | <script language="javascript"> function open_container() { var size=document.getElementById('mysize').value; var content = '<form role="form"><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form>'; var title = 'My dynamic modal dialog form with bootstrap'; var footer = '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button>'; setModalBox(title,content,footer,size); $('#myModal').modal('show'); } function setModalBox(title,content,footer,$size) { document.getElementById('modal-bodyku').innerHTML=content; document.getElementById('myModalLabel').innerHTML=title; document.getElementById('modal-footerq').innerHTML=footer; if($size == 'large') { $('#myModal').attr('class', 'modal fade bs-example-modal-lg') .attr('aria-labelledby','myLargeModalLabel'); $('.modal-dialog').attr('class','modal-dialog modal-lg'); } if($size == 'standart') { $('#myModal').attr('class', 'modal fade') .attr('aria-labelledby','myModalLabel'); $('.modal-dialog').attr('class','modal-dialog'); } if($size == 'small') { $('#myModal').attr('class', 'modal fade bs-example-modal-sm') .attr('aria-labelledby','mySmallModalLabel'); $('.modal-dialog').attr('class','modal-dialog modal-sm'); } } </script> |
Very fun to create a website using bootstrap as web templates. Similarly, how to create a dynamic modal dialog form using bootstrap adminLTE. Click here to see demo or visit here to read my another bootstrap tutorial
terima kasih gan, ini bekerja
Hi, any chance to pass a php variable to the modal from the button? Thanks
hello,
You can add new code in button onclick like example below
$variable_a=1; //php variable here //
onClick=”open_container(‘// php variable here //’);”
add new script at function open_container like below
function open_container(value)
{
alert(value);
}
I hope this helps 🙂
hi, I want passing PHP variable (example: $_GET[id]) to Bootstraps modal (read from MySQL by GET method) without Javascript, how I can this? many thanks!
I think PHP can not handle passing variable dynamically. You mean you want to passing variables into the input box? If true,
[php]
<input type="text" value=" <?php echo $sql[‘id’]; ?>" />
[/php]
Try my tutorial below
Create Simple CRUD with Datatables, Jquery and AdminLTE