ก่อนอื่นต้องทำการโหลด javascript framework ที่ชื่อว่า Mootools มาไว้ก่อนโดยโหลดได้ที่ MooTools.net
และดาวน์โหลตัวเสริม ได้ที่ LightFace
หลังจากนั้นมาเริ่มต้นสร้าง Pop-up สไตล์ Facebook ด้วยการเรียกไฟล์ .js 2 ไฟล์ด้วยกัน เป็นไฟล์หลักของ MooTools framework กับอีกไฟล์เป็นไฟล์ที่ใช้สำหรับทำ pop-up facebook style ดังตัวอย่าง ใส่ไว้ในส่วนของ tag <HEAD>
<script type="text/javascript" src="../mootools-1.3.js"></script>
<script type="text/javascript" src="Source/LightFace.js"></script>
และทำการ import css ไฟล์
<style type="text/css">
@import "Assets/LightFace.css";
</style>
**** ตรวจสอบที่อยู่ไฟล์ให้ถูกต้อง ****
ทำการกำหนดค่าเริ่มต้นของ Script โดยกำหนดความกว้าง ความสูง ชื่อ และเนื้อหา
ทำการกำหนดปุ่มสำหรับปิดหน้าต่าง pop-up facebook ของเรา
code javascript
<script type="text/javascript">
window.addEvent('domready',function() {
// Create instance
var modal = new LightFace({
height: 200,
width: 300,
title: 'My Profile,
content: 'Lorem ipsum....',
buttons: [
{ title: 'Close', event: function() { this.close(); }, color: 'green' }
]
});
$('profile').addEvent('click',function() { modal.open(); }); //ทำการกำหนดให้แสดง pop up เมื่อมีการคลิก ID="profile"
});
<script>
ในส่วนของ HTML เพียงแค่กำหนด ID ให้กับลิ้งค์ที่จะเรียก pop up ขึ้นมา
<a href="javascript:;" id="profile">Facebook Lightbox </a>เพียงเท่านี้ก็เสร็จสิ้นการทำ POP-UP ตามสไตล์ของ FACEBOOK แล้วครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น