Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > สอบถาม framework bootstrap เกี่ยวกับ list menu กับ jquey Modal หน่อยครับ

สอบถาม framework bootstrap เกี่ยวกับ list menu กับ jquey Modal หน่อยครับ

เริ่มหัวข้อใหม่

zinlucifer

โพสกระทู้ ( 140 )
บทความ ( 0 )

ผมอยากให้เวลาที่เรากด เลือกที่ List menu แล้วให้มันแสดง Modal ที่ซ่อนอยู่จะต้องเขียน โค้ดอย่างไรบ้างครับ

ปกติเคยเรียกแต่

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

อยากให้เรียกผ่าน
<select name="select1" id="select1">
<option value="">Select Floor</option>
</select>

http://twitter.github.com/bootstrap/javascript.html#modals

ขออภัยหากคำถามไม่เคลียร์ครับ

Tag : PHP, jQuery

Date : 2013-01-31 21:19:16

By : zinlucifer

View : 1833

Reply : 2

No. 1

Mongkon.k

โพสกระทู้ ( 3,848 )
บทความ ( 0 )

Code (JavaScript)

$('.select1').click(function(){
   $('#myModal').modal('show');
});

น่าจะประมาณนี้

Date : 2013-01-31 22:41:18

By : mangkunzo

No. 2

Krungsri

โพสกระทู้ ( 1,521 )
บทความ ( 2 )

Code (PHP)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	$('#select1').change(function(e) {
		var target = $(this).val();
        if(target!=0){
			$('#'+target).modal('show');
		}
    });
});
</script>
</head>
<body>
	<select name="select1" id="select1">
		<option value="0">Select Modal</option>
        <option value="modal1">Select Floor</option>
        <option value="modal2">Select Floor</option>
        <option value="modal3">Select Floor</option>
	</select>
	<div id="modal1" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Modal1 header</h3>
		</div>
		<div class="modal-body">
			<p>You open moda1…</p>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn">Close</a>
			<a href="#" class="btn btn-primary">Save changes</a>
		</div>
	</div>
    <div id="modal2" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Modal2 header</h3>
		</div>
		<div class="modal-body">
			<p>You open moda2…</p>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn">Close</a>
			<a href="#" class="btn btn-primary">Save changes</a>
		</div>
	</div>
    <div id="modal3" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Modal3 header</h3>
		</div>
		<div class="modal-body">
			<p>You open moda3…</p>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn">Close</a>
			<a href="#" class="btn btn-primary">Save changes</a>
		</div>
	</div>
</body>
</html>

Date : 2013-01-31 22:52:30

By : Krungsri

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถาม framework bootstrap เกี่ยวกับ list menu กับ jquey Modal หน่อยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02