js的弹出对话框

最新推荐文章于 2024-04-18 17:52:13 发布
最新推荐文章于 2024-04-18 17:52:13 发布
阅读量35 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yichengbo/archive/2011/09/20/2182273.html
版权

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function sAlert(str) {
            var msgw, msgh, bordercolor;
            msgw = 300;//提示窗口的宽度
            msgh = 200; //提示窗口的高度
            titleheight = 25; //提示窗口标题宽度
            bordercolor = "#FF3C00"; //提示窗口的边框颜色
            titlecolor = "#D2CECE";//提示窗口的标题颜色
            var sWidth, sHeight;
            sWidth = document.body.clientWidth; //bod对象宽度
            if (window.innerHeight && window.scrollMaxY) {
                sHeight = window.innerHeight + window.scrollMaxY;
            }
            else if (document.body.scrollHeight > document.body.offsetHeight) {
                sHeight = document.body.scrollHeight;
            }
            else {
                sHeight = document.body.offsetHeight;
            } //以上得到整个屏幕的高
            var bgObj = document.createElement("div"); //创建一个div对象
            bgObj.setAttribute("id", "bgDiv");
            bgObj.style.position = "absolute"; //绝对定位
            bgObj.style.top = "0"; //顶部为0
            bgObj.style.backgroud = "#777"; //背景颜色
            bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishiOpacity=75)"; //ie浏览器透明度设置
            bgObj.style.opacity = "0.6"; //透明度（火狐中）
            bgObj.style.left = "0"; //左边为0
            bgObj.style.width = sWidth + "px";
            bgObj.style.height = sHeight + "px";
            bgObj.style.zIndex = "100"; //层的z轴位置
            document.body.appendChild(bgObj);

            var msgObj = document.createElement("div");
            msgObj.setAttribute("id", "msgDiv");
            msgObj.setAttribute("align","center");
            msgObj.style.position = "absolute";
            msgObj.style.top = "30%";
            msgObj.style.backgroud = "white";
            msgObj.style.border = "1px solid "+bordercolor;
            msgObj.style.left = "35%";
            msgObj.style.font = "12px/1.6en Verdana,Geneva,Arial,Helvetica,sans-serif";
            msgObj.style.width = msgw + "px";
            msgObj.style.height = msgh + "px";
            msgObj.style.textAlign = "center";//文本位置属性，居中
            msgObj.style.lineHeight = "25px"; //行间距
            msgObj.style.zIndex = "101"; //层的z轴位置


            var title = document.createElement("h4"); //创建一个h4对象
            title.setAttribute("id", "msgTitle"); //为h4对象添加标题
            title.setAttribute("align", "right"); //文字的对齐方式
            title.style.margin = "0"; //浮动
            title.style.padding = "3px"; //浮动
            title.style.backgroud = titlecolor; //背景颜色
            title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20,startY=20,finishX=100,finishY=100,style=1,opacity=75,finishiOpacity=100);";
            title.style.opacity = "0.75"; //透明
            //title.style.border = "1px solid" + bordercolor;
            title.style.height = "25px"; //高度
            title.style.font = "12px Verdana,Geneva,Arial,Helvetica,sans-serif"; //字体属性
            title.style.color = "white"; //文字颜色
            title.style.cursor = "pointer";//鼠标样式
            title.innerHTML = "<a href=\"#\">关闭</a>";//显示的文字
            title.onclick = function () {
                document.body.removeChild(bgObj);//移除遮罩层
                document.getElementById("msgDiv").removeChild(title); //在提示框中移除标题
                document.body.removeChild(msgObj);//移除提示框
            }
            document.body.appendChild(msgObj); //在body中画出提示框层
            document.getElementById("msgDiv").appendChild(title); //在提示框中增加标题
            var txt = document.createElement("p");
            txt.style.margin = "0";//文本浮动
            txt.setAttribute("id", "msgTxt");//为p属性增加id属性
            txt.innerHTML = str;//把传进来的值赋给p属性
            document.getElementById("msgDiv").appendChild(txt); //把p属性增加到提示框中            
        }   
    </script>
</head>
<body>
<a href="#" οnclick="sAlert('<a href=http://www.it300.net>测试效果</a>');">点击测试</a>
</body>
</html>

转载于:https://www.cnblogs.com/yichengbo/archive/2011/09/20/2182273.html

weixin_34311757
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js弹出对话框方式小结
10-23
主要介绍了js弹出对话框方式,结合大量实例总结分析了JavaScript常用的弹出对话框的实现技巧与相关函数的具体使用方法,需要的朋友可以参考下
html js弹出等待框,九种js弹出对话框的方法总结
weixin_39591916的博客
06-09 1888
【1、最基本的js弹出对话框窗口代码】这是最基本的js弹出对话框，其实代码就几句非常简单：因为这是一段javascripts代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open ("page.html") 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前...
JavaScript弹出对话框的三种方式
xiaoweids的博客
06-11 7884
转自：微点阅读 https://www.weidianyuedu.com学习过js的小伙伴会发现，我们在一些实例中用到了alert()方法、prompt()方法、prompt()方法，他们都是在屏幕上弹出一个对话框，并且在上面显示括号内的内容，使用这种方法使得页面的交互性更精彩，实际上我们经常会在进行网页浏览时简单这种类型的对话框，在用户与应用程序进行双向交流时，经常要用到对话框。javascript的三种对话框是通过调用window对象的三个方法alert()，confirm()和prompt()来获得
JavaScript弹出对话框的三种方法
博士专属博客
01-10 5726
三种方法 alert(); 最简单，将alert();括号内的内容弹出。 confirm(); 与alert();类似，包含确认和取消按钮，点击确定confirm();方法会返回true，点击取消confirm();方法会返回false； prompt(); 与confirm();方法类似，点击时返回的事件相同。提供一个文本框， alert(); alert(&quot;你喜...
js的三种弹出对话框
lwbcsd的博客
03-07 4922
弹出对话框的三种方式 第一种:alert()【警示对话框】 alert()方法是这三种对话框中最容易使用的一种,我们将它称为警示对话框,该对话框上只有"确认"按钮,点完就可以关闭对话框。 eg: 第二种:confirm()【确认对话框】 confirm()方法与alert()方法的使用十分类似，不同点是在该种对话框上除 了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框,如果点击"确定"则confirm()会返回布尔值true,如果点击"取消"则返回布尔值flash。 eg: 第三
JS弹出对话框实现方法(三种方式)
11-22
本文实例讲述了JS弹出对话框实现方法。分享给大家供大家参考，具体如下： 1.警告框 <html> <head> [removed] function disp_alert() { alert("我是警告框！！") } [removed] </head...
九种js弹出对话框的方法总结
12-01
【1、最基本的js弹出对话框窗口代码】 这是最基本的js弹出对话框，其实代码就几句非常简单： 代码如下:[removed] <!– window.open (“page.html”) –> [removed] 因为这是一段javascripts代码，所以它们应该...
js中常用的弹出对话框3种方式
12-10
三种弹出对话框的用法实例 对话框有三种 1：只是提醒，不能对脚本产生任何改变； 2：一般用于确认，返回 true 或者 false ，所以可以轻松用于 if else 判断 3：一个带输入的对话框，可以返回用户填入的字符串，...
使用 Fetch API 执行 GraphQL 查询和变体
ikxin的博客
04-15 1106
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
PLSQL的下载与安装
最新发布
code袁的博客
04-18 295
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
js的filter函数
xiaohua0708day的博客
04-14 285
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。
TS基础2-常用类型
qq_40147756的博客
04-12 535
ts 中常用类型和举例说明。
js中的类
weixin_45705239的博客
04-16 172
ES6引入了 JavaScript 类。JavaScript 类是 JavaScript 对象的模板，因此js里的类不是对象。
AJAX请求（axios篇）
百赢出品，必属精品
04-15 1134
AJAX是“Asynchronous JavaScript and XML”的缩写，它是一种用于创建交互式网页应用程序的技术。AJAX允许在不重新加载整个网页的情况下，异步地向服务器发送请求并获取数据。这使得网页可以更加动态和交互性，而不会中断用户的操作。Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境，它可以在前端和后端进行HTTP请求。它的设计简单、易于使用，提供了丰富的功能和选项来处理HTTP请求和响应。
【可视化大屏开发】19. 加餐-百度地图API实现导航加线路热力图
pblh123的专栏
04-17 720
Web端使用场景中会涉及到地图导航路线情况，并利用热力图显示路况信息。实现效果如下：输入起始地点，选择并开始导航最终效果。
vue3 手写tab栏的滑动效果
Michelle209的博客
04-12 260
在tab上定位一个slider，每次点击的时候获取当前active的tab-item序号，从而获取到其相对于父元素的水平距离，然后把这个距离更新到slider的left属性上。
第一节 数据类型与结构
qq_43000315的博客
04-17 679
数据类型、类型检测
vue2-rtsp视频流播放
qq_38260470的博客
04-12 154
【代码】vue2-rtsp视频流播放。
js 弹出对话框
05-25
JavaScript 可以使用 `alert()` 函数来弹出对话框，例如： ```javascript alert("Hello, World!"); ``` 这会在页面中弹出一个包含 "Hello, World!" 文本的对话框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值