Tag: modal

  • สร้าง Modal dialog อย่างง่ายด้วย jquerymodal

    เนื่องจากตอนนี้มีพรบ.คอมพิวเตอร์เข้ามาเกี่ยวข้อง จึงต้องมี pop up Modal dialog ถามผู้ใช้ วันนี้จะมาแนะนำการใช้งาน jQuery ที่เรียกใช้ไม่กี่บรรทัดเราก็ได้ Modal dialog โดยจะยกตัวอย่าง Modal dialog แบบไม่ให้ปิดได้ โดยต้องอ่านข้อความก่อน ถึงจะปิดได้

    ขั้นตอนที่ 1 เพิ่ม jquery.min.js, jquery.modal.min.js, jquery.modal.min.css เพื่อเรียกใช้งาน

    <!-- Remember to include jQuery :) -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javascript"></script>
        <!-- jQuery Modal -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />    

    ขั้นตอนที่ 2 เพิ่มการตั้งค่า Modal dialog ตามตัวอย่างไม่ให้แสดงปุ่ม “ปิด”

     <script type="text/javascript">
            $(document).ready(function () {
                $("#ex1").modal({
                    escapeClose: false,
                    clickClose: false,
                    showClose: false,
                    fadeDuration: 100
                });
            });
    
        </script>

    ขั้นตอนที่ 3 เพิ่ม User interface Modal dialog โดยใช้ tag div

    ขั้นตอนที่ 4 ได้ผลลัพธ์ Modal dialog ออกมาอย่างสวยงาม

    ที่มา : https://jquerymodal.com