• ทำ modal โดยใช้ css3 แบบง่ายๆไว้เอาไปประยุกต์ใช้

    วิธีการทำ modal ไว้ใช้ในเว็บ

    ก่อนอื่นต้องมี library ของ jquery ก่อนนะครับ สามารถโหลดได้ที่  โหลด jquery
    จากนั้นก็ลองเขียน Code นี้ลงไปในส่วนของ css

     

    <style type="text/css" media="screen">
    .modal {
      border: solid 1px #000;
      position: fixed;
      max-width: 500px;
      top: 10;
      left: 50%;
      margin-left: -250px;
      padding: 1em;
      background: #fff;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      -webkit-transition: all 0.25s ease-out;
      -moz-transition: all 0.25s ease-out;
      -ms-transition: all 0.25s ease-out;
      -o-transition: all 0.25s ease-out;
      transition: all 0.25s ease-out;
      background-color: ##F4ECEC;
    }
    .modal.show {
      opacity: 1;
      pointer-events: auto;
    }
    </style>

     

    แล้วก็สร้าง modal ของเรา

    <button id="show-my-modal">Show My modal</button>
    <div class="modal">
      <p>My modal <button id="close-my-modal">Close</button></p>
    <p>
    My Modal
    </p>
    </div>

    แล้วก็เขียนในส่วนของ jquery

    <script type="text/javascript">
    jQuery(function(){
    
    $("#show-my-modal").click(function(){
    
    $(".modal").addClass("show"); });
    
    $("#close-my-modal").click(function(){
    
    $(".modal").removeClass("show"); });
    
    });
    
    </script>

    ตัวอย่าง
    modal

    Comments

    comments

Comments are closed.