บูตกล่องเตือน

ก่อนหน้านี้: Bootstrap กล่องป๊อปอัพ (popover) วิดเจ็ต

คำเตือน (Alert) ข้อความส่วนใหญ่จะใช้เพื่อแสดงข้อมูลเช่นผู้ใช้ปลายทางต้องการให้ข้อความเตือนหรือยืนยัน กล่องที่มีคำเตือน (Alert) plug-in ที่คุณสามารถเพิ่ม Cancel (ยกเลิก) ฟังก์ชั่นทุกกล่องข้อความแจ้งเตือน

การใช้

มีสองวิธีที่คุณสามารถเปิดกล่องคำเตือนที่จะยกเลิก (เลิกจ้าง) ฟังก์ชั่นมีดังนี้:

ผ่านแอตทริบิวต์ข้อมูล: โดยการเพิ่มข้อมูล API (Data API) เพื่อยกเลิกฟังก์ชั่นที่จะต้องเพิ่มปุ่มเพื่อปิดข้อมูลยกเลิก = "เตือน" ก็จะเพิ่มฟังก์ชันการทำงานเพื่อปิดกล่องเตือน
```
<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
	& ครั้ง;
</a>
```
โดย javascript: เพิ่มยกเลิกฟังก์ชันการทำงานที่ผ่าน javascript:
```
$ ( ". แจ้งเตือน"). การแจ้งเตือน ()
```

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้กล่องเตือน (Alert) วิดเจ็ตโดยข้อมูลการใช้แอตทริบิวต์

ตัวอย่าง

<div class = "การแจ้งเตือนการแจ้งเตือนเตือน" > <a href = "#" class = "ปิด" ข้อมูลยกเลิก = "เตือน"> และครั้ง; </ A> <strong> คำเตือน! </ strong> ปัญหาการเชื่อมต่อเครือข่ายของคุณ </ div>

ลอง»

ผลมีดังนี้

ตัวเลือก

มีตัวเลือกไม่มี

ทาง

นี่คือบางส่วนกล่องเตือน (Alert) plug-in วิธีที่มีประโยชน์:

方法	描述	实例
.alert()	该方法让所有的警告框都带有关闭功能。	$('#identifier').alert();
Close Method.alert('close')	关闭所有的警告框。	$('#identifier').alert('close');

ต้องการเปิดใช้งานแอนิเมชั่เมื่อปิดให้แน่ใจว่าคุณเพิ่ม.fade และชั้น .in

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง.alert () วิธีการ:

ตัวอย่าง

<h3> กล่องเตือน (Alert) แจ้งเตือนวิดเจ็ต () วิธี </ h3> <div id = "myAlert" class = "การแจ้งเตือนการแจ้งเตือนความสำเร็จ" > <a href = "#" class = "ปิด" ข้อมูลยกเลิก = "เตือน"> & ครั้ง; </ a> <strong> ความสำเร็จ! </ strong> ผลที่จะประสบความสำเร็จ </ div> <div id = "myAlert" class = "การแจ้งเตือนการแจ้งเตือนเตือน" > <a href = "#" class = "ปิด" ข้อมูลยกเลิก = "เตือน"> & ครั้ง; </ a> <strong> คำเตือน! </ strong> ปัญหาการเชื่อมต่อเครือข่ายของคุณ </ div> <script>

$ (ฟังก์ชั่น () {$ ( ".close") คลิก (ฟังก์ชั่น () {$ ( "#myAlert") แจ้งเตือน ();} .. );});

</ script> [/ mycode2] </ div> ฟรี <a target = "_ blank" href = "/try/try.php?filename=bootstrap3-plugin-alert-method1" class = "tryitbtn"> ลอง» </ a> </ div> <p> ตัวอย่างต่อไปนี้แสดงให้เห็นถึง <b> .alert ( 'ปิด' ) การใช้งาน </ b> วิธีการ: </ p> <div class = "ตัวอย่าง"> <H2 class = "ตัวอย่าง"> ตัวอย่างเช่น </ h2> <div class = "example_code"> [mycode3 type = "HTML"] <h3> กล่องเตือน (Alert) วิดเจ็ตแจ้งเตือน ( 'ปิด') วิธี </ h3> <div id = "myAlert" class = "การแจ้งเตือนการแจ้งเตือนความสำเร็จ" > <a href = "#" class = "ปิด" ข้อมูลยกเลิก = "เตือน"> & ครั้ง; </ a> <strong> ความสำเร็จ! </ strong> ผลที่จะประสบความสำเร็จ </ div> <div id = "myAlert" class = "การแจ้งเตือนการแจ้งเตือนเตือน" > <a href = "#" class = "ปิด" ข้อมูลยกเลิก = "เตือน"> & ครั้ง; </ a> <strong> คำเตือน! </ strong> ปัญหาการเชื่อมต่อเครือข่ายของคุณ </ div> <script>

$ (ฟังก์ชั่น () {$ ( ".close") คลิก (ฟังก์ชั่น () {$ ( "#myAlert") แจ้งเตือน ( 'ใกล้'); .. });});

</ script>

ลอง»

คุณสามารถดูทั้งหมดกล่องเตือนถูกนำมาใช้ปิดคุณลักษณะจะปิดช่องการเตือนใด ๆ ที่เหลืออื่น ๆ กล่องเตือนจะถูกปิด

เหตุการณ์

ตารางต่อไปนี้แสดงกล่องเตือน (Alert) ปลั๊กอินที่จะใช้ในกรณีที่ เหตุการณ์เหล่านี้สามารถนำมาใช้เมื่อฟังก์ชั่นเบ็ด

事件	描述	实例
close.bs.alert	当调用close实例方法时立即触发该事件。	$('#myalert').bind('close.bs.alert', function () { // 执行一些动作... })
closed.bs.alert	当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。	$('#myalert').bind('closed.bs.alert', function () { // 执行一些动作... })

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงกล่องเหตุการณ์การเตือน (Alert) plug-in:

ตัวอย่าง

<div id = "myAlert" class = "การแจ้งเตือนการแจ้งเตือนความสำเร็จ" > <a href = "#" class = "ปิด" ข้อมูลยกเลิก = "เตือน"> & ครั้ง; </ a> <strong> ความสำเร็จ! </ strong> ผลที่จะประสบความสำเร็จ </ div> <script>