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

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

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

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1072
Joined: 21/05/2019 10:45 am

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

Postby jamepiyawat » 25/07/2019 4:43 pm

ผมได้มีโอกาสทำ 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 รูปภาพเพื่อเป็นสื่อประชาสัมพันธ์ให้กับผู้ที่เข้ามาดูเว็บของเราก็ได้ก็หวังว่าบทความนี้จะเป็นประให้กับทุกท่านที่ได้เข้ามาอ่นกันนะครับขอบคุณครับ
Last edited by jamepiyawat on 26/07/2019 3:14 pm, edited 1 time in total.

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 21748
Joined: 22/09/2008 6:18 pm
Contact:

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

Postby mindphp » 25/07/2019 9:14 pm

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


Return to “Joomla Developing Knowledge”

Who is online

Users browsing this forum: No registered users and 1 guest