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

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย 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() นั้นเอง

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

โค้ด: เลือกทั้งหมด

<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 รูปภาพเพื่อเป็นสื่อประชาสัมพันธ์ให้กับผู้ที่เข้ามาดูเว็บของเราก็ได้ก็หวังว่าบทความนี้จะเป็นประให้กับทุกท่านที่ได้เข้ามาอ่นกันนะครับขอบคุณครับ
แก้ไขล่าสุดโดย jamepiyawat เมื่อ 26/07/2019 3:14 pm, แก้ไขไปแล้ว 1 ครั้ง.
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

โค้ดที่ยกตัวอย่างมาเป็น Jquery + HTML
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 68