Bootstrap EP.14 การสร้าง Popup เพื่อเรียกหน้าเว็บ เรียกฟอร์มต่าง ๆ หรือเรียกข้อมูลมูลต่าง ๆ มาแสดงและใช้งาน
Bootstrap EP.14 การสร้าง Popup เพื่อเรียกหน้าเว็บ เรียกฟอร์มต่าง ๆ
หรือเรียกข้อมูลมูลต่าง ๆ มาแสดงและใช้งาน เป็นการออกแบบให้เว็บไซต์
ดูมีลูกเล่นมากขึ้นและเพิ่มราคาให้กับเว็บไซต์ของเราขั้นตอนการทำนั้น
ไม่ยากอย่างที่คิด คลิ๊กดูคลิปวีดีโอได้เลย
โค๊ชที่ต้องใช้
1. ส่วนการทำงานของปุ่ม
|
1 |
<a class="btn btn-warning btn-sm btn_edit" id=""> <span class="glyphicon glyphicon-edit"></span>edit</a> |
2. วางหลัง</title> หน้าที่เป็นปุ่ม
|
1 2 3 4 5 6 7 8 9 10 11 |
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function() { $('#example').DataTable(); } ); </script> |
3. ส่วนควบคุมการทำงานทั้งหมด วางหลัง </html>
|
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 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function(){ $(".btn_edit").on('click',function(){ $.ajax({ url :"foredit.php" , data:"id="+$(this).attr("id"), type:"GET", beforeSend: function(){ }, success : function(result){ $("#addbook_dialog_modal").html(''); $("#addbook_dialog_modal").html(result); $("#addbookModal").modal('show'); }, error : function(error){ alert(error.responseText); } }); }); }); </script> <!-- Large modal --> <button type="button" class="btn btn-primary btn-lg sr-only" id="btn_msg1" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button> <div class="modal fade" id="addbookModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" id="addbook_dialog_modal" role="document"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button> <!--ส่วนที่จะเรียกไปแสดง--> <div class="modal-footer"> <input name="save" type="submit" id="save" value="+ บันทีก" class="btn btn-primary"> <button type="button" class="btn btn-danger" data-dismiss="modal">ยกเลิก</button> </div> </div> |
