Page 1 of 1

วิธีการทำโมดูล popup ใน joomla

Posted: 25/07/2019 4:43 pm
by jamepiyawat
ผมได้มีโอกาสทำ module joomla เป็น popup สำหรับ popup หน้าเว็บไซต์ของนั้นคงจะเป็นสิ่งที่น่าจะมีกันซ่ะเป็นส่วยใหญ่เพราะว่าจะได้แจ้งข้อมูลข่าวสารได้หรือแจ้งเตือนอะไรก็ได้หรือแม้แต่เว็บขายสินค้าออนไลท์ก็จำเป็นจะต้องมี popup เพื่อเป็นการแจ้งเตือนผู้ที่เข้ามาดูเว็บของเรานั้นเองวันนี้ผมก็จะมาอธิบายวิธีการทำ module popup มาฝากกันจะเป็นอย่างไรลองไปดูกันเลย

อันดับแรกเราจำเป็นจะต้องโหลอ Modal bootstrap มาก่อนเพื่อจะได้เป็นหน้าต่าง popup ให้กับเรา
สามารถโหลด Modal ได้ที่ https://getbootstrap.com/2.3.2/javascript.html#modals

ทีนี้เราก็จะได้ Modal ที่เป็นปุ่มมาเราต้องคลิกเอาถึงจะขึ้นหน้าต่างขึ้นมาแล้วเราจะทำยังไงจะให้เรามันสามารถแสดงได้อัตโมมัติล่ะเราก็จะให้ใช้ jQuery(document).ready(function() นั้นเอง

โค้ดก็จะเป็นแบบนี้

Code: Select all

<script type="text/javascript">

      jQuery(document).ready(function(){
          jQuery("#myModal").modal('show');
      });

  </script>
  <!-- modal -->
  <div id="myModal" class="modal fade">
    <div class="modal-dialog modal-md"> <!-- กำหนดขนาดของ 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>
        </div>
        <div class="modal-body">
          <center><p>Popup แจ้งเตือนต่าง ๆ </p>        
        </div>
        <div class="modal-footer">
          <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
      </div>
    </div>
  </div>
ผลลัพที่ได้
Selection_999(133).png
เป็นอย่างไรกันบ้างครับสำหรับโมดูลจุมล่า popup ไม่ยากเลยใช้ไหมล่ะครับก็อย่าลืมนำโค้ดนี้ไปแก้ไขหรือพัฒนาต่อกันด้วยนะครับสามารถประยุกได้หลายอย่างเลยทั้งเป็นแบบฟอมให้ผู้ใช้กรอกหรือจะทำเป็น popup รูปภาพเพื่อเป็นสื่อประชาสัมพันธ์ให้กับผู้ที่เข้ามาดูเว็บของเราก็ได้ก็หวังว่าบทความนี้จะเป็นประให้กับทุกท่านที่ได้เข้ามาอ่นกันนะครับขอบคุณครับ

Re: วิธีการทำโมดูล popup ใน joomla

Posted: 25/07/2019 9:14 pm
by mindphp
โค้ดที่ยกตัวอย่างมาเป็น Jquery + HTML