แจกสคริป Bootstrap modal pop-up ที่สามารถกำหนดเวลาให้ pop-up ขึ้นมาหลังจากโหลดหน้าเว็บแล้ว จะกำหนดเพิ่มอีกกี่วินาทีก็ได้ครับ ปรับแต่งได้เต็มที่ คำอธิบายเพิ่มเติมอยู่ใน 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of Auto Loading Bootstrap Modal on Page Load</title> <!-- script modal popup --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- css --> <style type="text/css"> /*modal css*/ /* fade ออกมาตรงกลางหน้าจอ .fade { opacity: 0; -webkit-transition: opacity 1s linear; transition: opacity 1s linear; } */ /* fade left ออกมาจากทางซ้ายของหน้าจอ */ .modal.fade:not(.in) .modal-dialog { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } </style> <script type="text/javascript"> /* //onload show modal script ชุดนี้โหลดมาตรงๆ ไม่มีหน่วงเวลานะ $(document).ready(function(){ $("#myModal").modal('show'); }); */ //เรีกยก modal ออกมาแสดง var show = function(){ $('#myModal').modal('show'); }; /* กำหนดเวลาหลังเปิดหน้าเว็บ ว่าจะให้แสดงหลังโหลดหน้าเว็บแล้วกี่วินาที เช่น 2000 = 2 วิ */ $(window).load(function(){ var timer = window.setTimeout(show,2000); }); </script> </head> <body> <!-- title --> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 align="center"> devbanban.com </h2> </div> </div> </div> <!-- modal --> <div id="myModal" class="modal fade"> <div class="modal-dialog modal-sm"> <!-- กำหนดขนาดของ modal เพิ่มได้นะครับ เช่น xs, sm, md, lg --> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title"> devbanban.com </h4> </div> <div class="modal-body"> <p>ข้อความ..... </p> เนื้อหา, รุปภาพ ฯลฯ หรือเอาไปประยุกต์ใช้กับอะไรก็ได้ครับ <br> </div> </div> </div> </div> <!-- devbanban.com --> </body> </html> |
อย่าลืมเอาไปพัฒนาต่อยอดนะครับ devbanban.com