<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义弹出框</title>
<style type="text/css">
.layout {
width: 2000px;
height: 400px;
border: 1px solid red;
text-align: center;
}
</style>
<script type="text/javascript">
//1.首先判断是否为数组
//splice()方法是向数组中添加或删除项目，然后返回被删除的项目。
//arrayObject.splice(index,howmany,itemX);其中index为添加/删除项目的位置，使用负数则是从结尾的位置开始。
function isArray(v) {
return v && typeof v.length == 'number' && typeof v.splice == 'function';
}
//创建元素
function createEle(tagName) {
return document.createElement(tagName);
}
//在body中添加子元素
function appendChild(eleName) {
return document.body.appendChild(eleName);
}
//从body中删除子元素
function remChid(eleName) {
return document.body.removeChild(eleName);
}
//2.
function showWindow(title, html, width, height, modal, buttons) {
//避免窗体太小
if(width < 300) {
width = 300;
}
if(height < 200) {
height = 200;
}
//声明mask的宽度和高度（就是整个屏幕的宽度高度）
var w, h;
//可见区的宽度和高度
var cw = document.documentElement.clientWidth;
var ch = document.documentElement.clientHeight;
//整个文章的宽度高度
var sw = document.documentElement.scrollWidth;
var sh = document.documentElement.scrollHeight;
//如果页面向上滚动，可视区域的顶部距离页面顶部和左边的距离（也就是页面滚动上去的距离）
var st = document.documentElement.scrollTop;
var sl = document.documentElement.scrollLeft;
w = cw > sw ? cw : sw;
h = ch > sh ? ch : sh;
//为了避免窗体过大
if(width > w) {
width = w;
}
if(height > h) {
height = h;
}
//如果modal为true,即模式对话框，就要创建一透明膜
//3.cssText讲解
//cssText的本质是设置html元素的style属性值，用法如下
//使用的优势：一般在js中设置元素的样式时，样式一多，代码就多，而且通过js来复写对象的样式是
// 比较典型的一种销毁原样式并重建的过程，这种销毁和重建都会增加浏览器的开销。
//可以避免页面reflow,提高页面性能。
//但是，这样会有一个这样的问题，会把原有的cssText清除掉，比如原来的style中有'display:none',
//执行完代码后，display会被删掉。为了解决这个问题，可以采用cssText累加的方法。
//Element.style.cssText += "width:100px;height:100px;border:10px solid red;"
//这样累加的方法在IE中是无效的。
if(modal) {
var mask = createEle('div');
mask.style.cssText = "position: absolute;left: 0;top: 0;background: #ccc;opacity: 0.75;filter: Alpha(opacity=75);z-index: 100;width: " + w + "px;height:" + h + "px;";
appendChild(mask);
}
//主窗体代码
var win = createEle('div');
win.style.cssText = "position: absolute;left:" + (sl + cw / 2 - width / 2) + "px ;top:" + (st + ch / 2 - height / 2) + "px;background:#f0f0f0;z-index:101;width:" + width + "px;height:" + height + "px;border:2px solid #afccfe;";
//标题栏
var tBar = createEle('div');
tBar.style.cssText = "margin: 0;width: " + width + "px;height:25px;cursor:move;";
//标题栏中的文字部分
var titleCon = createEle('div');
titleCon.style.cssText = "float: left;margin: 3px;";
titleCon.innerHTML = title;
tBar.appendChild(titleCon);
//标题栏中的关闭按钮
var closeCon = createEle('div');
closeCon.style.cssText = "float: right;width: 20px;margin: 3px;cursor: pointer;";
closeCon.innerHTML = "x";
tBar.appendChild(closeCon);
win.appendChild(tBar);
//窗体的内容部分
var htmlCon = createEle('div');
htmlCon.style.cssText = "text-align: center;width: " + width + "px;height:" + (height - 50) + "px;overflow:auto;";
htmlCon.innerHTML = html;
win.appendChild(htmlCon);
//窗体底部的按钮
var btnCon = createEle('div');
btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";
//如果参数buttons为数组的话，就会创建自定义按钮
if(isArray(buttons)) {
var length = buttons.length;
if(length > 0) {
if(length % 2 == 0) {
for(var i = 0; i < length; i = i + 2) {
//按钮数组
var btn = createEle('button');
btn.innerHTML = buttons[i]; //firefox不支持value属性，所以这里用innerHTML
// btn.value = buttons[i];
btn.onclick = buttons[i + 1];
btnCon.appendChild(btn);
//用户填充按钮之间的空白
var nbsp = createEle('label');
nbsp.innerHTML = " ";
btnCon.appendChild(nbsp);
}
}
}
}
//这是默认的关闭按钮
var btn = createEle('button');
// btn.setAttribute("value","关闭");
btn.innerHTML = "关闭";
// btn.value = '关闭';
btnCon.appendChild(btn);
win.appendChild(btnCon);
appendChild(win);
/***********************************以下为拖动窗体事件**********************/
//鼠标停留的X坐标
var mouseX = 0;
//鼠标停留的Y坐标
var mouseY = 0;
//窗体到body顶部的距离
var toTop = 0;
//窗体到body左边的距离
var toLeft = 0;
//判断窗体是否可以移动
var moveable = false;
//事件一：标题栏按下鼠标事件
tBar.onmousedown = function() {
var eve = getEvent();
moveable = true;
//4.事件属性是指事件所引发的状态及事件本身特有的一些特性。
//clientX事件返回当前事件被触发时鼠标指针向对于浏览器页面的水平坐标。
//pageX/pageY是鼠标相对于整个页面的X/Y坐标，整个页面也就是你整个网页的全部，比如你的网页很长，那么最大值就是他们了
//clientX/clientY是事件发生时鼠标在浏览器内容区域的X/Y坐标，就是用来显示网页的可视区域，也就是说需要拖动滚动条才能看到的不算，当窗口大小改变时，他俩的值也会改变。
mouseX = eve.clientX;
mouseY = eve.clientY;
toTop = parseInt(win.style.top);
toLeft = parseInt(win.style.left);
//事件二：移动鼠标事件
tBar.onmousemove = function() {
if(moveable) {
var eve = getEvent();
var x = toLeft + eve.clientX - mouseX;
var y = toTop + eve.clientY - mouseY;
if(x > 0 && (x + width < w) && y > 0 && (y + height < h)) {
win.style.left = x + "px";
win.style.top = y + "px";
}
}
}
//事件三：放下鼠标事件，注意这里是document,而不是tBar
document.onmouseup = function() {
moveable = false;
}
}
//获取浏览器对象的方法，兼容ie和firefox
//5.callee和caller的区别和作用
//callee:放回正在执行的函数本身的引用，它是arguments的一个属性，它有一个length属性
//caller:返回一个函数的引用，这个函数调用了当前的函数。这个属性只有当函数执行时才有用。
// functionName.caller，functionName是当前正在执行的函数
// var a = function(){
// alert(a.caller);
// }
// var b = function() {
// a();
// }
// b();
//b调用了a，a返回的是b的引用。如果不是调用的b(),而是a(),则返回的是null。
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
//顶部标题栏额底部按钮栏中的关闭按钮事件
btn.onclick = closeCon.onclick = function() {
remChid(win);
if(mask) {
remChid(mask);
}
}
}
//showWindow函数结束
function addCheckbox(name, value, id, click) {
var str = "<input type='checkbox' name='" + name + "' value='" + value + "' id='" + id + "' οnclick='" + (click == null ? '' : click) + "'/> <label for='" + id + "'>" + value + "</label>";
return str;
}
//6.cellspacing表示单元格之间的间距；colspan表示单元格可以横跨的列数
function show() {
var str = "<div><div style='border:dotted 1px blue'><table cellspacing='2'>";
str += "<tr><td colspan='7' style='text-align:center'>请选择所在地区：" + addCheckbox('all', '全（不）选', 'cities_all', 'selectAll(this,\"cities_cb\")') + "</td></tr>";
str += "<tr><td>" + addCheckbox('cities_cb', '长沙市', 'cities_cb1') + "</td><td>" + addCheckbox('cities_cb', '株洲市', 'cities_cb2') + "</td><td>" + addCheckbox('cities_cb', '湘潭市', 'cities_cb3') + "</td><td>" + addCheckbox('cities_cb', '衡阳市', 'cities_cb4') + "</td><td>" + addCheckbox('cities_cb', '益阳市', 'cities_cb5') + "</td>";
str += "<td>" + addCheckbox('cities_cb', '常德市', 'cities_cb6') + "</td><td>" + addCheckbox('cities_cb', '岳阳市', 'cities_cb7') + "</td></tr>";
str += "<tr><td>" + addCheckbox('cities_cb', '邵阳市', 'cities_cb8') + "</td><td>" + addCheckbox('cities_cb', '郴州市', 'cities_cb9') + "</td><td>" + addCheckbox('cities_cb', '娄底市', 'cities_cb10') + "</td>";
str += "<td>" + addCheckbox('cities_cb', '永州市', 'cities_cb11') + "</td><td>" + addCheckbox('cities_cb', '怀化市', 'cities_cb12') + "</td><td>" + addCheckbox('cities_cb', '张家界市', 'cities_cb13') + "</td><td>" + addCheckbox('cities_cb', '湘西自治州', 'cities_cb14') + "</td></tr>";
str += "</table></div><br/><div style='border:dotted 1px blue'><table cellspacing='2'>";
str += "<tr><td colspan='10' style='text-align:center'>请选择矿种：" + addCheckbox('all', '全（不）选', 'class_all', 'selectAll(this,\"class_cb\")') + "</td></tr>";
str += "<tr><td>" + addCheckbox('class_cb', '铋', 'class_cb1') + "</td><td>" + addCheckbox('class_cb', '钒', 'class_cb2') + "</td><td>" + addCheckbox('class_cb', '金', 'class_cb3') + "</td><td>" + addCheckbox('class_cb', '煤', 'class_cb4') + "</td><td>" + addCheckbox('class_cb', '锰', 'class_cb5') + "</td><td>" + addCheckbox('class_cb', '钼', 'class_cb6') + "</td><td>" + addCheckbox('class_cb', '铅', 'class_cb7') + "</td><td>" + addCheckbox('class_cb', '石膏', 'class_cb8') + "</td><td>" + addCheckbox('class_cb', '石煤', 'class_cb9') + "</td><td>" + addCheckbox('class_cb', '锑', 'class_cb10') + "</td></tr>";
str += "<tr><td>" + addCheckbox('class_cb', '铁', 'class_cb11') + "</td><td>" + addCheckbox('class_cb', '铜', 'class_cb12') + "</td><td>" + addCheckbox('class_cb', '钨', 'class_cb13') + "</td><td>" + addCheckbox('class_cb', '锡', 'class_cb14') + "</td><td>" + addCheckbox('class_cb', '锌', 'class_cb15') + "</td><td>" + addCheckbox('class_cb', '银', 'class_cb16') + "</td><td>" + addCheckbox('class_cb', '萤石', 'class_cb17') + "</td><td>" + addCheckbox('class_cb', '铀', 'class_cb18') + "</td><td>" + addCheckbox('class_cb', '稀土氧化物', 'class_cb19') + "</td><td>" + addCheckbox('class_cb', '重晶石', 'class_cb20') + "</td></tr>";
str += "<tr><td>" + addCheckbox('class_cb', '硼', 'class_cb21') + "</td><td>" + addCheckbox('class_cb', '磷', 'class_cb22') + "</td><td>" + addCheckbox('class_cb', '水泥灰岩', 'class_cb23') + "</td><td>" + addCheckbox('class_cb', '熔剂灰岩', 'class_cb24') + "</td><td>" + addCheckbox('class_cb', '冶金白云岩', 'class_cb25') + "</td><td>" + addCheckbox('class_cb', '岩盐', 'class_cb26') + "</td><td>" + addCheckbox('class_cb', '芒硝', 'class_cb27') + "</td><td>" + addCheckbox('class_cb', '钙芒硝', 'class_cb28') + "</td><td>" + addCheckbox('class_cb', '地下水', 'class_cb29') + "</td><td>" + addCheckbox('class_cb', '地下热水', 'class_cb30') + "</td></tr>";
str += "</table></div></div>";
showWindow('我的提示框', str, 850, 250, true, ['地区', fun1, '矿种', fun2]);
}
//复选框全选函数
function selectAll(obj, oName) {
var checkboxs = document.getElementsByName(oName);
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked=obj.checked;
}
}
//这个函数是为了获得被选项的值
function getStr(cbName) {
var cbox = document.getElementsByName(cbName);
var str = "";
for(var i=0;i<cbox.length;i++){
if(cbox[i].checked){
str +="," + cbox[i].value;
}
}
//7.substr()方法是指可在字符串中抽取从star下标开始的指定数目的字符串，因此它可以替代substring()和slice来使用
// substr(start,lentgh)
str = str.substr(1);
return str;
}
function fun1 () {
var str = getStr('cities_cb');
alert('你选择的地区为：'+str);
}
function fun2 () {
var str = getStr('class_cb');
alert('你选择的矿种为：'+str);
}
</script>
</head>
<body>
<div class="layout"></div>
<div class="layout"></div>
<div class="layout">
<input type="button" value="显示" οnclick="show()" />
</div>
</body>
</html>
01-10
858
858
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
