JavaScript+Css Custom Alert
เป็น Override ฟังค์ชั่น ของ Java Script สามารถใช้ ฟังค์ชั้น alert () and confirm () ในการใช้งานได้เลย และสามารถที่จะดัดแปลงกรูปแบบต่างๆ ด้วย Css ข้อดีที่ชอบมากๆเลยคือ ไม่ใช้ JQuery ในการเขียนเลยครับเป็น Java Script and Css เพียวๆ แถมยังซัพพอร์ท Responsive Design ด้วยคับ
การใช้งานครับ
เริ่มจากลิ้ง CSS โดยจะมีให้สองแบบคือแบบ ทั่วไปธรรมดาๆ กับ แบบbootstrap
แบบธรรมดา
|
1 |
<link rel="stylesheet" href="YOU/PATH/dist/css/custom-alert.css"> |
แบบbootstrap
|
1 |
<link rel="stylesheet" href="YOU/PATH/dist/css/custom-alert-bootstrap.css"> |
ต่อมาก็ลิ้ง Java Script
|
1 |
<script src="YOU/PATH/dist/js/custom-alert.min.js"> |
ทุกครั้งใช้งานต้องประกาศเสมอ
|
1 |
new customAlert(); |
ตัวอย่าง
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<link rel="stylesheet" href="dist/css/custom-alert.css"/> <script src="dist/js/custom-alert.min.js"></script> </head> <body onload =demo1();> <script type="text/javascript"> new customAlert(); function demo1() { alert("Alert text"); } </script> </body> |
ตัวอย่างเพิ่มเติมสามารถดูได้ที่นี่ครับ
https://github.com/PhilippeAssis/custom-alert
0 Comments