Forgot Password ??

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

	Registered : 109,037

HOME > PHP > PHP Forum > สอบถามเรื่องการทำ Background เป็นแบบ fadeIn,fadeOut

สอบถามเรื่องการทำ Background เป็นแบบ fadeIn,fadeOut

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

Agility

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

ผมโหลด Jquery เกี่ยวกับการ Popup มาใช้งาน ตอนแรกมันก็แสดง Background ได้อย่างที่ผมต้องการ แต่พอผมแก้ไขโดยแสดงข้อมูลทั้งหมดมาที่ตัว <div id="mySpan"></div> มันก็แสดงผลเพี้ยนทันที รบกวนช่วยดูโค้ดให้ผมหน่อยนะครับ
Code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ทดสอบ</title>
<link rel="stylesheet" href="general.css" type="text/css" media="screen">
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
</head>
<script language="JavaScript">
var HttPRequest = false;

function doCallAjax(Mode) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}

var url = 'insert.php';
var pmeters = "tscheduledate=" + encodeURI( document.getElementById("txtschedule_date").value) +
"&tsubject=" + encodeURI( document.getElementById("txtsubject").value ) +
"&tdetail=" + encodeURI( document.getElementById("txtdetail").value ) +
"&tMode=" + Mode;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);

HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
document.getElementById("txtschedule_date").value = '';
document.getElementById("txtsubject").value = '';
document.getElementById("txtdetail").value = '';
}
}
}
</script>

<body Onload="JavaScript:doCallAjax('LIST');">
<div id="button"><input type="submit" value="Show Popup!" /></div>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>555</h1>
<p><label for ="schedule_date">Schedule Date :</label> <input type = "text" name = "txtschedule_date" id="txtschedule_date"></p>
<p><label for = "subject">Subject :</label> <input type="text" name="txtsubject" id="txtsubject"></p>
<p><label for = "detail">Detail:</label> <textarea name="txtdetail" id="txtdetail"> </textarea></p>
<div id = "button_Action">
<input type="submit" id="save" value="Confirm" onclick="JavaScript:doCallAjax('ADD');"/>
<input type="button" id = "close" value="Close"/>
</div>
</div>
<div id="backgroundPopup"></div>
<div id="mySpan"></div>
</body>
</html>

Code

/*
margin-right ระยะห่างเช่น วันที่ : [margin-right] ช่องกรอกข้อมูล
margin - ระยะห่างจากขอบ
z-index - การจัดเรียงลำดับ ปรกติถ้าหากไม่กำหนด z-index (z-indexจะเท่ากับ 0)
ตัวอย่าง http://www.quackit.com/css/properties/css_z-index.cfm
*/
#popupContact{
display:none;
position:fixed;
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
a{
cursor: pointer;
text-decoration:none;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
label{
color: #669900;
width: 7em;
float: left;
text-align: right;
margin-right: 0.5em;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
margin:50px;
}
#backgroundPopup{
display:none;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
input[type='text']{
width: 300px;
}
textarea{
width: 300px;
height: 150px;
}

Code (JavaScript)

//0 means disabled; 1 means enabled;
var popupStatus = 0;

function loadPopup(){
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

function disablePopup(){
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

function centerPopup(){
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}

$(document).ready(function(){
	$("#button").click(function(){
		centerPopup();
		loadPopup();
	});

	$("#popupContactClose").click(function(){
		disablePopup();
	});

	$("#button_Action").click(function(){
		disablePopup();
	});

	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

Tag : PHP

Date : 2011-05-09 16:56:29

By : Agility

View : 1128

Reply : 3

No. 1

หมาของเซสชั่น

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

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

Date : 2011-05-09 17:24:59

By : Dragons_first

No. 2

Agility

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

ตามตรูปเลยครับ ก่อนการแก้ไข Background จะได้ตามที่ต้องการดังรูปนี้ Before

แต่พอแก้ไปแก้มา Background มันไม่แสดงเต็มหน้าจอ After

Date : 2011-05-10 08:36:30

By : Agility

No. 3

The Gunner

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

http://api.jquery.com/fadeIn/

Date : 2011-05-10 10:46:30

By : TEST_CODE

ค้นหาข้อมูล

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

Re : สอบถามเรื่องการทำ Background เป็นแบบ fadeIn,fadeOut

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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