โดย Parichat » 10/01/2018 3:57 pm
ในการทำ popup(ป็อบอัพ) เพื่อแจ้งเตื่อนหริอเพิ่มการค้นหาด้วย Bootstrap(บูตสแต็บ)
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>รายชื่อผู้ป่วย</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">ค้นหาผู้ป่วย</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">ข้อมูลผู้ป่วย</h4>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" id="keyword" class="form-control" placeholder="HN/เลขบัตร/ชื่อ/นามสกุล">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ยกเลิก</button>
<button type="button" id="btnSearch" class="btn btn-primary">ค้นหา</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ผลลัพธ์
Modal Size(โมเดลไซน์) มี 2 แบบ คือ
- 1.Small Modal(ซมอลโมเดล)
รูปแบบ
โค้ด: เลือกทั้งหมด
<div class="modal-dialog modal-sm">
//***ใส่ข้อมูลหรือฟอร์มลงไปได้
</div>
ตัวอย่างการนำไปใช้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>รายชื่อผู้ป่วย</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">ค้นหาผู้ป่วย</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">ข้อมูลผู้ป่วย</h4>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" id="keyword" class="form-control" placeholder="HN/เลขบัตร/ชื่อ/นามสกุล">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ยกเลิก</button>
<button type="button" id="btnSearch" class="btn btn-primary">ค้นหา</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ผลลัพธ์
- 2.Large Modal(ลาจโมเดล)
รูปแบบ
โค้ด: เลือกทั้งหมด
<div class="modal-dialog modal-lg">
//***ใส่ข้อมูลหรือฟอร์มลงไปได้
</div>
ตัวอย่างการนำไปใช้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>รายชื่อผู้ป่วย</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">ค้นหาผู้ป่วย</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">ข้อมูลผู้ป่วย</h4>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" id="keyword" class="form-control" placeholder="HN/เลขบัตร/ชื่อ/นามสกุล">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ยกเลิก</button>
<button type="button" id="btnSearch" class="btn btn-primary">ค้นหา</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ผลลัพธ์
อ้างอิง :
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
[b]ในการทำ popup(ป็อบอัพ) เพื่อแจ้งเตื่อนหริอเพิ่มการค้นหาด้วย [url=https://www.mindphp.com/forums/viewforum.php?f=76]Bootstrap(บูตสแต็บ)[/url][/b]
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>รายชื่อผู้ป่วย</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">ค้นหาผู้ป่วย</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">ข้อมูลผู้ป่วย</h4>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" id="keyword" class="form-control" placeholder="HN/เลขบัตร/ชื่อ/นามสกุล">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ยกเลิก</button>
<button type="button" id="btnSearch" class="btn btn-primary">ค้นหา</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>[/code]
[b][color=#FF0000]ผลลัพธ์[/color][/b]
[attachment=2]tfgh.JPG[/attachment]
[b]Modal Size(โมเดลไซน์) มี 2 แบบ[/b] คือ
[list][b]1.Small Modal(ซมอลโมเดล)[/b]
[b][color=#FF40BF]รูปแบบ[/color][/b]
[code]<div class="modal-dialog modal-sm">
//***ใส่ข้อมูลหรือฟอร์มลงไปได้
</div>[/code]
[b][color=#FF0000]ตัวอย่างการนำไปใช้[/color][/b]
[code]<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>รายชื่อผู้ป่วย</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">ค้นหาผู้ป่วย</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">ข้อมูลผู้ป่วย</h4>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" id="keyword" class="form-control" placeholder="HN/เลขบัตร/ชื่อ/นามสกุล">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ยกเลิก</button>
<button type="button" id="btnSearch" class="btn btn-primary">ค้นหา</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>[/code]
[b][color=#FF0000]ผลลัพธ์[/color][/b]
[attachment=1]gu.JPG[/attachment][/list]
[list][b]2.Large Modal(ลาจโมเดล)[/b]
[b]รูปแบบ[/b]
[code]<div class="modal-dialog modal-lg">
//***ใส่ข้อมูลหรือฟอร์มลงไปได้
</div>[/code]
[b][color=#FF0000]ตัวอย่างการนำไปใช้[/color][/b]
[code]<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>รายชื่อผู้ป่วย</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">ค้นหาผู้ป่วย</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">ข้อมูลผู้ป่วย</h4>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" id="keyword" class="form-control" placeholder="HN/เลขบัตร/ชื่อ/นามสกุล">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ยกเลิก</button>
<button type="button" id="btnSearch" class="btn btn-primary">ค้นหา</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>[/code]
[b][color=#FF0000]ผลลัพธ์[/color][/b]
[attachment=0]fgh.JPG[/attachment][/list]
[b]อ้างอิง[/b] : [url]https://www.w3schools.com/bootstrap/bootstrap_modal.asp[/url]