jquery實現彈出可移動層代碼

最後更新：2014-07-02 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style http java color width os

iframe.html頁面

//彈出可移動層頁面，以及部分jquery判斷

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<link rel="stylesheet" href="loginDialog.css" type="text/css"/>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<a href="#" id="example">登入DIY帳號視窗樣本</a>
<div id="LoginBox">
<div class="row1">
登入DIY帳號視窗<a href="javascript:void(0)" title="關閉視窗" class="close_btn" id="closeBtn">×</a>
</div>
<div class="row">
使用者名稱: <span class="inputBox">
<input type="text" id="txtName" placeholder="帳號/郵箱" />
</span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
</div>
<div class="row">
密    碼: <span class="inputBox">
<input type="text" id="txtPwd" placeholder="密碼" />
</span><a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
</div>
<div class="row">
<a href="#" id="loginbtn">登入</a>
</div>
</div>
<script type="text/javascript">
$(function ($) {
//彈出登入
$("#example").hover(function () {
$(this).stop().animate({
opacity: ‘1‘
}, 600);
}, function () {
$(this).stop().animate({
opacity: ‘0.6‘
}, 1000);
})

$("#example").click(function(){
$("body").append("<div id=‘mask‘></div>");
$("#mask").addClass("mask").fadeIn("slow");
$("#LoginBox").fadeIn("slow");
});
//
//按鈕的透明度
$("#loginbtn").hover(function () {
$(this).stop().animate({
opacity: ‘1‘
}, 600);
}, function () {
$(this).stop().animate({
opacity: ‘0.8‘
}, 1000);
});
//文字框不允許為空白---按鈕觸發
$("#loginbtn").click(function () {
var txtName = $("#txtName").val();
var txtPwd = $("#txtPwd").val();
if (txtName == "" || txtName == undefined || txtName == null) {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$(".warning").css({ display: ‘block‘ });
}
else {
$("#warn").css({ display: ‘block‘ });
$("#warn2").css({ display: ‘none‘ });
}
}
else {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$("#warn").css({ display: ‘none‘ });
$(".warn2").css({ display: ‘block‘ });
}
else {
$(".warning").css({ display: ‘none‘ });
}
}
});

});
</script>

$("#txtPwd").focus(function () {
$("#warn2").css({ display: ‘none‘ });
});

//關閉
$(".close_btn").hover(function () { $(this).css({ color: ‘black‘ }) }, function () { $(this).css({ color: ‘#999‘ }) }).click(function () {
$("#LoginBox").fadeOut("fast");
$("#mask").css({ display: ‘none‘ });
});

$("#loginbtn").on("click",function(){
var checkName = false;
var checkPass=false;
var textName,textPass;
textname = $("#txtName").val();
textpass = $("#txtPwd").val();
//文字框不允許為空白---單個文本觸發
var txtName = $("#txtName").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn").css({ display: ‘block‘ });
}
else {
$("#warn").css({ display: ‘none‘ });
checkName=true;
}
//密碼
var txtName = $("#txtPwd").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn2").css({ display: ‘block‘ });
}
else {
$("#warn2").css({ display: ‘none‘ });
checkPass = true;
}

if(checkName === false){
alert(‘請輸入使用者名稱‘);
return;
}
if(checkPass === false){
alert(‘請輸入密碼‘);
return;
}

if(checkName===true & checkPass ===true){
$.post("checkLogin.php", { ‘txtname‘:textname, ‘txtpwd‘: textpass},function(data){
alert(data);
});
}
});

$(‘#LoginBox‘).mousemove( function (event) {
var isMove = true;
var abs_x = event.pageX - $(‘#LoginBox‘).offset().left;
var abs_y = event.pageY - $(‘#LoginBox‘).offset().top;
$(document).mousemove(function (event) {
if (isMove) {
var obj = $(‘#LoginBox‘);
obj.css({‘left‘:event.pageX - abs_x, ‘top‘:event.pageY - abs_y});
}
} ).click(function(){
isMove = false;
});
});

});

</script>

</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery實現彈出可移動層代碼

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support