浅谈javascript中的三种弹窗


Posted in Javascript onOctober 21, 2016

js中三种弹窗

1)alert 弹出警告 无返回值---------alert('第一行\n第二行');

2)confirm()选择确定或取消,返回t或f----var result = confirm('是否删除!');

3)prompt()弹出输入框,返回输入内容----var value = prompt('输入你的名字:', '请在这里输入名字');

当然也可以自定义好看的样式。下面代码有问题明天再改。

<script>
//window.confirm
//prompt
window.alert = function(title,str) 
{ 
var shield = document.createElement("DIV"); 
shield.id = "shield"; 
shield.style.position = "absolute"; 
shield.style.left = "0px"; 
shield.style.top = "0px"; 
shield.style.width = "100%"; 
shield.style.height = document.body.scrollHeight+"px"; 
//弹出对话框时的背景颜色 
shield.style.background = "#fff"; 
shield.style.textAlign = "center"; 
shield.style.zIndex = "25"; 
//背景透明 IE有效 
//shield.style.filter = "alpha(opacity=0)"; 
var alertFram = document.createElement("DIV"); 
alertFram.id="alertFram"; 
alertFram.style.position = "absolute"; 
alertFram.style.left = "50%"; 
alertFram.style.top = "50%"; 
alertFram.style.marginLeft = "-225px"; 
alertFram.style.marginTop = "-75px"; 
alertFram.style.width = "450px"; 
alertFram.style.height = "150px"; 
alertFram.style.background = "#ff0000"; 
alertFram.style.textAlign = "center"; 
alertFram.style.lineHeight = "150px"; 
alertFram.style.zIndex = "300"; 
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n"; 
strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">" + title + "</li>\n"; 
strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">" + str + "</li>\n"; 
strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #e85727;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" /></li>\n"; 
strHtml += "</ul>\n"; 
alertFram.innerHTML = strHtml; 
document.body.appendChild(alertFram); 
document.body.appendChild(shield); 
var ad = setInterval("doAlpha()",5); 
this.doOk = function(){ 
alertFram.style.display = "none"; 
shield.style.display = "none"; 
} 
alertFram.focus(); 
document.body.onselectstart = function(){return false;}; 
}
</script>

以上就是小编为大家带来的浅谈javascript中的三种弹窗全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jquery实现pager控件示例
Apr 09 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
javascript二维数组转置实例
Jan 22 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 #Javascript
AngularJS 与百度地图的结合实例
Oct 20 #Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 #Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 #Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 #Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 #Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 #Javascript
You might like
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
微信API接口大全
2015/04/15 PHP
php实现Session存储到Redis
2015/11/11 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
javascript实现全角与半角字符的转换
2015/01/07 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
django实现支付宝支付实例讲解
2019/10/17 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
采购员的工作职责
2013/12/26 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
武侯祠导游词
2015/02/04 职场文书
标枪加油稿
2015/07/22 职场文书
生活委员竞选稿
2015/11/21 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
redis缓存存储Session原理机制
2021/11/20 Redis
Java无向树分析 实现最小高度树
2022/04/09 Javascript
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android