DIV提示框

最新推荐文章于 2020-08-26 09:43:11 发布
最新推荐文章于 2020-08-26 09:43:11 发布
阅读量2.3k 收藏
点赞数
文章标签： div function javascript button 测试 input

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div提示框</title>
</head>

<body>
      <p>测试</p>
      <input type="button" value="点击这里" οnclick="sAlert('<a href=http://hi.baidu.com/pao8041/>测试效果</a>');" />

<script type="text/javascript" language="javascript">
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#007ECE";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色


var sWidth,sHeight;
sWidth=document.body.offsetWidth-25;
sHeight=document.body.scrollHeight;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=0,finishOpacity=0)";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);


var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
  msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = document.body.scrollTop+document.body.clientHeight/2;
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";

var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.οnclick=function(){
     document.body.removeChild(bgObj);
           document.getElementById("msgDiv").removeChild(title);
           document.body.removeChild(msgObj);
           }
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
      document.getElementById("msgDiv").appendChild(txt);
       }

</script>

</body>
</html>

一弗楚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DIV形式的alert提示效果--JS源码[原]
TomHu的专栏
11-24 4828
调用方法:input type="button" value="点击我就看到效果了哦``" onclick="DIVAlert(测试!!!);" />JS源码:script type="text/javascript" language="javascript">      function DIVAlert(str)...{      var msgw,msgh,bordercolor;
JS使用cookie实现DIV提示框只显示一次的方法
11-25
本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法。分享给大家供大家参考，具体如下： 这里运用JavaScript的cookie技术，控制网页上的提示DIV只显示一次，也就是当用户是第一次打开网页的时候才显示，第二...
div提示框
Before_Morning的专栏
07-13 867
积分：596
显示Div提示框
鞠勇鸿的技术专栏
07-26 863
function showHint(){ var obj=document.createElement("div"); document.body.appendChild(obj); obj.id=hint1; obj.innerHTML="正在那啥。。。请稍候。。。"; obj.innerHTML+="关闭" obj.style.display="block";
自定义div提示框
付凯
01-24 562
css: table.table-custom { width: 100%; height: auto; border-top: 1px solid #808080; border-left: 1px solid #808080; } table.table-custom tr:nth-child(odd) td { background: #fafafa!im...
css 提示框 CSS实现带箭头的DIV提示框
09-25
毕业设计要做一个提示框：当鼠标放在某个链接上时，下边显示有提示功能的窗体,接下来详细介绍，感兴趣的朋友可以参考下
jquery div提示框渐隐弹出与隐藏效果
12-09
jquery div提示框渐隐弹出与隐藏 *{margin:0;padding:0;font-size:12px;} input{width:120px;height:30px;cursor:pointer;} #note{position:absolute;width:400px;padding:20px;background:#eee;border:1px solid #...
写入cookie后只显示一次的DIV提示框代码
01-23
本文将详细讲解如何通过编写JavaScript代码，在写入Cookie后仅显示一次的DIV提示框。 首先，我们要理解Cookie的基本概念。Cookie是由服务器端发送到客户端（浏览器）的一小段文本信息，浏览器会在后续的请求中将其...
HTML中DIV提示框的实现
iteye_16353的博客
06-29 1057
[align=center]HTML中DIV提示框的实现[/align] 点击网页中某个按钮时，会弹出一个对话框，自定义提示框的样式和内容。 [b]HTML代码：[/b] [color=green][/color] [color=green][/color] [color=green][/color] 。。。。。 [b]JS代码：[/b] ...
div弹出框js弹出框
06-25
div弹出框,js弹出框,轻松轻松定制
JS实现DIV提示框的效果
渴望...
04-10 1177
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type"
右下角出现提示DIV
03-27 1893
 bgcolor="#cfdef4">   valign="middle">   valign="middle" width="100%">温馨提示：   width="19" align="right">   请打开您的音箱收听不同的音乐吧，随机播放。快试试吧！：）        style="FONT-WEIGHT:bold;COLOR:navy">收听全部   var divTop,divL
Javascript收藏之:div提示框
jmh521的专栏
11-20 901
/***div层的提示信息**陈文光   2008.4.29*stitle 标题*str 显示的内容*msgw 提示窗口的宽度*msgh 提示窗口的高度*msgleft 窗口的左边位置msgtop 窗口的顶端位置*使用例子 登陆*/function sAlert(str, stitle, msgw, msgh, msgleft, msgtop) {    if (document.getEleme
div弹出消息框
u011511086的专栏
12-03 1263
/**  * 自定义静态消息提示框  * @param msg 提示消息   */ var AlertMsg = function () {     var timeout001 = null;     /**      * 静态提示框      * @param msg 提示消息      * @param time 提示显示存在时间（毫秒）,默认2000毫秒      */
固定在浏览器底部显示一个用于提示的div
one__tiger的博客
08-26 488
最近写项目有要用到一个提示的东西，所以就写了个demo让以后也方便找 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>固定底部显示的提示按钮</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/
jquery 信息提示框对话框 div层实现
人生若南柯一梦
01-07 3361
jquery 信息提示框对话框 div层实现
页面出div提示层
weixin_34080951的博客
10-10 146
在后台方法执行的过程中，如果系统不能在用户容忍的时间间隔内做出相应的话，我们希望系统能够给与提示，用以友好的人机交互，这个时候我们可以采取使用div弹出的方式来完成目标： 1、使用jquery编写要弹出的div层，代码如下：function showTips(tips){//用来定位弹框位置 var windowWidth = documen...
JQuery鼠标移动到div上，显示提示
archer的技术故事
06-07 8007
JQuery鼠标移动到div上，显示提示 test.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> abcdefg1 abcdefg2
请写一个html电脑鼠标移动上去div上方悬浮显示一个div提示框，手机长按之后在上方悬浮显示一个div提示框的代码
最新发布
06-12
好的，以下是HTML和CSS代码，可以实现鼠标悬浮和手机...注意，为了支持手机长按事件，这段代码还包含了一些JavaScript代码，可以监听 `touchstart` 和 `touchend` 事件，并根据长按持续时间来判断是否需要显示提示框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值