首页 > 代码库 > jquery实现弹出可移动层代码
jquery实现弹出可移动层代码
iframe.html页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹窗显示</title>
</head>
<body>
<div id="container" style="overflow:hidden;">
<iframe border="0" id="content" src="http://www.mamicode.com/demo1.html" frameborder="0" height="100%" width="100%"></iframe>
</div>
</body>
</html>
//弹出可移动层页面，以及部分jquery判断
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<link rel="stylesheet" href="http://www.mamicode.com/loginDialog.css" type="text/css"/>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.8.3.js"></script>
</head>
<body>
<a href="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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>
<script type="text/javascript">
$(document).ready(function(){
$("#txtName").focus(function () {
$("#warn").css({ display: ‘none‘ });
});
$("#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>