การติดตั้งและใช้งาน sweetalert2 javascript's popup

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

การติดตั้งและใช้งาน sweetalert2 javascript's popup

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

sweet alert เป็น css และ js ที่ช่วยในการทำ alert ต่างๆ ในโปรเจ็คดูสวยงามมากขึ้น

รูปภาพ

ในการติดตั้ง sweetalert2 สามารถทำได้ 3 วิธี

โค้ด: เลือกทั้งหมด

$ npm install sweetalert2
หรือ

โค้ด: เลือกทั้งหมด

$ bower install sweetalert2
หรือดาวโหลด จาก CDN: jsdelivr.com/package/npm/sweetalert2

ในการทดสอบการใช้งาน ให้สร้างไฟล์ index.html

โค้ด: เลือกทั้งหมด

<!DOCTYPEhtml>
<html>
<head>
	<metacharset="utf-8"/>
	<metahttp-equiv="X-UA-Compatible"content="IE=edge">
	<title>Test Sweetalert</title>
	<metaname="viewport"content="width=device-width, initial-scale=1">
	<linkrel="stylesheet"type="text/css"href="sweetalert2/dist/sweetalert2.min.css"/>
	<scriptsrc="sweetalert2/dist/sweetalert2.min.js"></script>
</head>
<body>
	<buttontype="button"onclick="swalFunction()">Alert</button>
</body>
 
<script>
	function swalFunction() {
		swal('สวัสดีชาวโลก');
	}
</script>
</html>
รูปภาพ

นอกจากนั้นเราสามารถปรับแต่งเพิ่มให้เข้ากับโปรเจ็คเรา ขึ้นอยู่กับว่าเราต้องการใช้มันเพื่ออะไร

โค้ด: เลือกทั้งหมด

<script>
function swalFunction() {
swal({
  type: 'error',
  title: 'Oops...',
  text: 'Something went wrong!'
});
}
</script>
รูปภาพ

โค้ด: เลือกทั้งหมด

<script>
Swal({
  title: 'Are you sure?',
  text: "Do you want to Delete thist data!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})
</script>
รูปภาพ

การปรับแต่งเพิ่มเติมสามารถศึกษาได้จากเว็บไซต์ต้นทางได้เลย https://sweetalert2.github.io/
การทำ popup(ป็อบอัพ) เพื่อแจ้งเตื่อนหริอเพิ่มการค้นหาด้วย Bootstrap(บูตสแต็บ)
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 29