js自定义弹出框
js自定义弹出框：
代码如下
<html>
<head><title>自定义弹出对话框</title>
<style type ="text/css" >
.layout
{
width:2000px;
height:400px;
border:solid 1px red;
text-align:center;
}
</style>
<script type="text/javascript">
//判断是否为数组
function isArray(v)
{
return v && typeof v.length == 'number' && typeof v.splice == 'function';
}
//创建元素
function createEle(tagName)
{
return document.createElement(tagName);
}
//在body中添加子元素
function appChild(eleName)
{
return document.body.appendChild(eleName);
}
//从body中移除子元素
function remChild(eleName)
{
return document.body.removeChild(eleName);
}
//弹出窗口，标题（html形式）、html、宽度、高度、是否为模式对话框(true,false)、按钮（关闭按钮为默认，格式为['按钮1',fun1,'按钮2',fun2]数组形式，前面为按钮值，后面为按钮onclick事件）
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.body.clientWidth;
var ch = document.body.clientHeight;
//正文的宽度和高度
var sw = document.body.scrollWidth;
var sh = document.body.scrollHeight;
//可见区域顶部距离body顶部和左边距离
var st = document.body.scrollTop;
var sl = document.body.scrollLeft;
w = cw > sw ? cw:sw;
h = ch > sh ? ch:sh;
//避免窗体过大
if (width > w)
{
width = w;
}
if (height > h)
{
height = h;
}
//如果modal为true，即模式对话框的话，就要创建一透明的掩膜
if (modal)
{
var mask = createEle('div');
mask.style.cssText
=
"position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:100;width:"
+ w + "px;height:" + h + "px;";
appChild(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:solid 2px #afccfe;";
//标题栏
var tBar = createEle('div');
//afccfe,dce8ff,2b2f79
tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;";
//标题栏中的文字部分
var titleCon = createEle('div');
titleCon.style.cssText = "float:left;margin:3px;";
titleCon.innerHTML = title;//firefox不支持innerText，所以这里用innerHTML
tBar.appendChild(titleCon);
//标题栏中的“关闭按钮”
var closeCon = createEle('div');
closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可用
closeCon.innerHTML = "×";
tBar.appendChild(closeCon);
win.appendChild(tBar);
//窗体的内容部分，CSS中的overflow使得当内容大小超过此范围时，会出现滚动条
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);
appChild(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;
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
function getEvent()
{
return window.event || arguments.callee.caller.arguments[0];
}
//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件
btn.onclick = closeCon.onclick = function()
{
remChild(win);
if (mask)
{
remChild(mask);
}
}
}
function addCheckbox(name,value,id,click)
{
var
str = "<input type='checkbox' name='" + name + "' value='" + value +
"' id='" + id + "' onclick='" + (click == null ? '':click) +
"'/> <label for='" + id + "'>" + value + "</label>";
return str;
}
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>";
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>" + "</td></tr>";
str
+= "<tr><td>" + addCheckbox('class_cb','铁','class_cb11') +
"</td><td>" + addCheckbox('class_cb','铜','class_cb12') + "</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;
}
}
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="显示" onclick="show()" />
</div>
</body>
</html>
js自定义弹出框的更多相关文章
- android自定义弹出框样式实现
前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...
- react native仿微信性别选择-自定义弹出框
简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...
- .NET MVC 学习笔记（四）— 基于Bootstarp自定义弹出框
.NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...
- 【原创】贡献一个JS的弹出框代码...
一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...
- jquery实现自定义弹出框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 常见弹出框学习
模拟系统的弹出框 系统自带的弹出框 总结 链接 http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...
- 自定义弹出框基于zepto 记得引入zepto
html <!DOCTYPE html> <html> <meta charset="utf-8"> <title></tit ...
- js登录弹出框插件
第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...
- bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
随机推荐
- linux下nat配置
iptables要启用nat表,必须启动nat表的支持.默认情况下,linux下是没有开启nat表的支持的. #启动内核的路由功能 echo > /proc/sys/net/ipv4/ip_fo ...
- java获得汉语首字母
package org.scbit.lsbi.scp.utils; import net.sourceforge.pinyin4j.PinyinHelper; import net.sourcefor ...
- nginx笔记资料
通配 hash 表 ngx_hash_init 实现注释:http://blog.csdn.net/gsnumen/article/details/7817396 ngx_hash_init之后的结构 ...
- 通过ios实现RSA加密和解密
在加密和解密中,我们需要了解的知识有什么事openssl:RSA加密算法的基本原理:如何通过openssl生成最后我们需要的der和p12文件. 废话不多说,直接写步骤: 第一步:openssl来生成 ...
- ajax表单提交
HTML代码: <form id="formCity" action="/SiteMap/Search" method="get" o ...
- PHP上传文件示例
虽然大多数人认为Web只包含网页,但HTTP协议实际上可以传输任何文件,如office文档.PDF.可执行文件.AVI.压缩文件及各种其他文件类型.虽然FTP在历史上一直是向服务器上传文件的标准方式, ...
- Gamma校正与线性空间
基础知识部分 为了方便理解,首先会对(Luminance)的相关概念做一个简单介绍.如果已经了解就跳到后面吧. 我们用Radiant energy(辐射能量)来描述光照的能量,单位是焦耳(J),因为光 ...
- OpenCV成长之路(2)：图像的遍历
我们在实际应用中对图像进行的操作,往往并不是将图像作为一个整体进行操作,而是对图像中的所有点或特殊点进行运算,所以遍历图像就显得很重要,如何高效的遍历图像是一个很值得探讨的问题. 一.遍历图像的4种方 ...
- bin/sh^M: bad interpreter: No such file or directory解决
问题:bin/sh^M: bad interpreter: No such file or directory 原因:.sh脚本在windows系统下用记事本文件编写的.不同系统的编码格式引起的. 解 ...
- 使用sp_xml_preparedocument处理XML文档
有时会在存储过程中处理一些XML格式的数据,所以会用到sp_xml_preparedocument,他可以将XML数据进行读取,然后使用 MSXML 分析器 (Msxmlsql.dll) 对其进行分析 ...