โดย 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() นั้นเอง
โค้ดก็จะเป็นแบบนี้
โค้ด: เลือกทั้งหมด
<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>
ผลลัพที่ได้
เป็นอย่างไรกันบ้างครับสำหรับโมดูลจุมล่า popup ไม่ยากเลยใช้ไหมล่ะครับก็อย่าลืมนำโค้ดนี้ไปแก้ไขหรือพัฒนาต่อกันด้วยนะครับสามารถประยุกได้หลายอย่างเลยทั้งเป็นแบบฟอมให้ผู้ใช้กรอกหรือจะทำเป็น popup รูปภาพเพื่อเป็นสื่อประชาสัมพันธ์ให้กับผู้ที่เข้ามาดูเว็บของเราก็ได้ก็หวังว่าบทความนี้จะเป็นประให้กับทุกท่านที่ได้เข้ามาอ่นกันนะครับขอบคุณครับ
ผมได้มีโอกาสทำ module [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2620-joomla-cms.html]joomla[/url] เป็น popup สำหรับ popup หน้าเว็บไซต์ของนั้นคงจะเป็นสิ่งที่น่าจะมีกันซ่ะเป็นส่วยใหญ่เพราะว่าจะได้แจ้งข้อมูลข่าวสารได้หรือแจ้งเตือนอะไรก็ได้หรือแม้แต่เว็บขายสินค้าออนไลท์ก็จำเป็นจะต้องมี popup เพื่อเป็นการแจ้งเตือนผู้ที่เข้ามาดูเว็บของเรานั้นเองวันนี้ผมก็จะมาอธิบายวิธีการทำ [url=https://www.mindphp.com/forums/viewtopic.php?f=79&t=37198]module[/url] popup มาฝากกันจะเป็นอย่างไรลองไปดูกันเลย
อันดับแรกเราจำเป็นจะต้องโหลอ Modal bootstrap มาก่อนเพื่อจะได้เป็นหน้าต่าง popup ให้กับเรา
สามารถโหลด Modal ได้ที่ https://getbootstrap.com/2.3.2/javascript.html#modals
ทีนี้เราก็จะได้ Modal ที่เป็นปุ่มมาเราต้องคลิกเอาถึงจะขึ้นหน้าต่างขึ้นมาแล้วเราจะทำยังไงจะให้เรามันสามารถแสดงได้อัตโมมัติล่ะเราก็จะให้ใช้ jQuery(document).ready(function() นั้นเอง
โค้ดก็จะเป็นแบบนี้
[code]<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>[/code]
ผลลัพที่ได้
[attachment=0]Selection_999(133).png[/attachment]
เป็นอย่างไรกันบ้างครับสำหรับโมดูลจุมล่า popup ไม่ยากเลยใช้ไหมล่ะครับก็อย่าลืมนำโค้ดนี้ไปแก้ไขหรือพัฒนาต่อกันด้วยนะครับสามารถประยุกได้หลายอย่างเลยทั้งเป็นแบบฟอมให้ผู้ใช้กรอกหรือจะทำเป็น popup รูปภาพเพื่อเป็นสื่อประชาสัมพันธ์ให้กับผู้ที่เข้ามาดูเว็บของเราก็ได้ก็หวังว่าบทความนี้จะเป็นประให้กับทุกท่านที่ได้เข้ามาอ่นกันนะครับขอบคุณครับ