本文主要包含div+js写弹出框等相关知识,Sun_of_Rainy希望在学习及工作中可以帮助到您
本意是想重写alert方法，折腾了半天没有成果，然后想着用div写个弹出框，效果是实现了，但是弹出框是不能拖动的，还有一个问题是就算能拖动，关闭按钮不能随弹出框移动，它的位置是写死的
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<title>js写弹出框</title>
<style>
body {
height: 100%;
overflow: auto;
margin: 0;
}
#div_Test {
position: fixed;
_position: absolute;
top: 50%;
left: 50%;
border: 2px solid #C0C0C0;/*弹出框边框样式*/
background-color: #FFFFFF;/*弹出框背景色*/
display:none;
width:400px;
height:200px;
font-size：10px
}
* html {
overflow: hidden;
position: absolute;
}
#close{
background-color:#FFF;
position:fixed;
bottom:40%;
left:50%;
right:5%;
}
</style>
<script type="text/javascript">
//弹出层
function show_Win(div_Win, tr_Title, event) {
var s_Width = document.documentElement.scrollWidth; //滚动 宽度
var s_Height = document.documentElement.scrollHeight; //滚动 高度
var js_Title = $("title"); //标题
js_Title.css("cursor", "move");
//创建遮罩层
$("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");
//获取弹出层
var msgObj = $("#" + div_Win);
msgObj.css('display', 'block'); //必须先弹出此行，否则msgObj[0].offsetHeight为0，因为"display":"none"时，offsetHeight无法取到数据；如果弹出框为table，则为'',如果为div，则为block，否则textbox长度无法充满td
//y轴位置
var js_Top = -parseInt(msgObj.height()) / 2 + "px";
//x轴位置
var js_Left = -parseInt(msgObj.width()) / 2 + "px";
msgObj.css({ "margin-left": js_Left, "margin-top": js_Top });
//使弹出层可移动
//msgObj.draggable({ scroll: true});
//Mover(msgObj)
$(document).ready(function(){
$("#div_Test").click(function(){
$("#title").css("color","red");
});
});
}
$(document).ready(function(){
$("#close").click(function(){
$("#div_Test").hide();
});
});
</script>
</head>
<body>
<input id="bb" type="button" value="测试弹出框" onclick="show_Win('div_Test', 'title', event)" />
<div id="div_Test">
<div id="title" style="border: 1px solid #f0f0f0;font-size:20;text-align:center">标题</div>
内容
<input id="close" type="button" value="关闭" />
</div>
</body>
</html>
还有一个问题：如何在html中获取input输入框的输入值
var name = $("#name").val();
一个输入框为空显示提示语的例子
<body>
<div id="main">主要内容展示区</div>
<input type="text" id="name" onblur='test()'>
<div id='alert'>
</div>
</body>
<script type="text/javascript">
function test(){
//$('.loading-gif').show();
//$('#main').hide();
var name = $("#name").val();
if(name == ""){
$("#alert").html("姓名输入为空")
}
}
$(".name").blur(function(){
if(name == ''){
$('#alert').html("姓名输入为空")
}
});
</script>