Forgot Password ??

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

	Registered : 109,027

HOME > PHP > PHP Forum > อยากถามเรื่อง alert โดยมีกล่องกรอก password ข้างในว่ามันชื่ออะไรครับ

อยากถามเรื่อง alert โดยมีกล่องกรอก password ข้างในว่ามันชื่ออะไรครับ

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

Guest

อยากถามเรื่อง alert โดยมีกล่องกรอก password ข้างในว่ามันชื่ออะไรครับ

มีตัวอย่างเขียนให้ดูไหมครับ อย่าได้แบบคลิกปุ่ม แล้วจะมี alert ขึ้นมา แล้วใน alert มีกล่องกรอก password เพื่อรับค่า

Tag : PHP, MySQL, Ms SQL Server 2008, JavaScript, jQuery

Date : 2012-07-17 10:57:50

By : ???

View : 1019

Reply : 4

No. 1

Luckystar

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

แบบนี้หรือเปล่า

http://jqueryui.com/demos/dialog/#modal-form

Date : 2012-07-17 11:03:28

By : LuckyStar

No. 2

Guest

คับ แบบนี้เลยคับ

Date : 2012-07-17 11:11:08

By : Guest

No. 3

Guest

copy code มาลองใช้ ทำไมไม่เห็นเหมือนกับมันเลย

Date : 2012-07-17 11:32:23

By : ำพ

No. 4

Guest

ได้แล้วคับ

Code (PHP)

<style type="text/css">
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  /*background:url(jquery/modal/images/login-header.png) no-repeat 0 0 transparent; */
  background-color:#99CCFF;
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
 /* background:url(jquery/modal/images/login-blank.png) no-repeat 0 0 transparent;*/ 
background-color:#99CCFF;
  width:375px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  background-color:#99CCFF;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
 /*background:url(jquery/modal/images/notice.png) no-repeat 0 0 transparent; */
 background-color:#99CCFF;
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
</style>

Code (PHP)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple JQuery Modal Window from Queness</title>

<script type="text/javascript" src="jquery/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

</script>	
<?PHP include('test_css.css');?>
</head>
<body>

<a href="#dialog1" name="modal">Login Dialog Box</a>


<div id="boxes">

<div id="dialog" class="window">

<a href="#"class="close"/>Close it</a>
</div>
  
<!-- Start of Login Dialog -->  
<div id="dialog1" class="window">
  <div class="d-header">
    <input type="password"  onclick="this.value=''" style="height:30px;" maxlength="12"/>    
  </div>
  <div class="d-blank">
  <div style="margin-left:35%;"><input type="image" alt="Login" title="Login" src="click.png" width="130" height="60"/></div>
  </div>
</div>
<!-- End of Login Dialog -->  

<!-- Mask to cover the whole screen -->
  <div id="mask"></div>

</div>



</body>
</html>

Date : 2012-07-17 15:12:45

By : Guest

ค้นหาข้อมูล

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

Re : อยากถามเรื่อง alert โดยมีกล่องกรอก password ข้างในว่ามันชื่ออะไรครับ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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