ผมไม่ได้ดู source code ของเว็บตัวอย่างนะครับ
แต่ก็คิดว่า น่าจะทำจาก Modal Javascript
ลองหาปลั๊กอินพวก landing page modal plugin มาใช้ดูครับ
เกรงว่าคุณอาจไม่เข้าใจ เลยขอเพิ่มเติมสักนิดแล้วกันนะครับ
เมื่อคุณใช้ modal (ซึ่งผมคิดว่าบางทีคุณอาจผ่านตามมาแล้ว ในการหาปลั๊กอิน)
คุณสามารถใส่อะไรก็ได้ เข้าไปยัง modal body
ตัวอย่างโค๊ด
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4> Videos </h4>
</div>
<div class="modal-body">
<p>Modal content..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
----------------
เมื่อคุณตั้งค่า ใน Jquery
โค๊ด
jQuery("#vvideolist").on("click", "#myBtn", function(event) {
vdid = jQuery(this).parents("tr").find("td a").attr('rel');
preview_link = "//youtube.com/embed/" vdid "?autoplay=0&autohide=1&modestbranding=1&rel=1&hd=1";
video_modal='<div id="previewframe" class="video-container">'
'<div class="embed-responsive embed-responsive-16by9">'
'<iframe width="100%" height="500" src="' preview_link '" frameborder="0" allowfullscreen></iframe>'
'</div>';
'</div>';
var $modal = $('.modal');
$modal.on('show.bs.modal', function(e) {
$(this)
.addClass('modal-scrollfix')
.find('.modal-body')
.html(video_modal);
});
jQuery("#myModal").modal({show: true});
});
มันก็จะแสดง video ที่ #myModal (ซึ่งก็คือ Modal)
โดยแทนที่เนื้อหาในส่วน class="modal-body"
********************************************
การใช้ ปลั๊กอิน จะสะดวกตรงที่ คุณไม่จำเป็นต้องเข้าใจโค๊ด ก็สามารถใช้งานได้เหมือนกับคนเขียนโค๊ดเอง
หากสนใจจะใช้ ก็ลองหาดูนะครับ
พัฒนาเว็บไซต์
