用Javascript弹出div定义的消息框并往块里面填写文字
<!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>
<title>LIGHTBOX EXAMPLE</title>
<style> html, body {
height: 100%;
width: 100%;
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
background-color:#DCDCDC;
border: 2px solid #aaaaaa;
z-index:1002;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#f5f5f5;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.close {
float:right;
clear:both;
width:100%;
text-align:center;
margin:0 0 6px 0;
}
/*.close a {
color:#333;
text-decoration:none;
font-size:14px;
font-weight:700
}*/
.con {
text-indent:1.5pc;
line-height:21px
}
.title
{
float:right;
clear:both;
width:100%;
height:20px;
text-align:left;
margin:0 0 6px 0;
background-color:#0000ff;
color:#ffffff;
}
.titlePicture
{
float:right;
clear:both;
width:100%;
height:20px;
text-align:right;
margin:0 0 6px 0;
background-color:#0000ff;
color:#ffffff;
}
</style>
<script>
function show(tag,message)
{
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
var content=document.getElementById('content');
light.style.display='block';
fade.style.display='block';
content.innerHTML=message; }
function hide(tag)
{
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='none';
fade.style.display='none';
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show('light',' 你好！这里是测试内容。这里的文字会显示在消息框当中。')">打开</a>
<div id="light" class="white_content">
<div class="title">来自网页的消息 <img src="./关闭图标.jpg" align="right" onclick="hide('light')"/></div>
<!-- <div class="titlePicture"><img src="./关闭图标.jpg" onclick="hide('light')"/></div> -->
<div id="content" class="con"> </div>
<div class="close">
<input id="btnClose2" type="button" value="确定" onclick="hide('light')" /><br/>
<!-- <a href="javascript:void(0)" onclick="hide('light')">关闭</a> -->
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
运行结果如下：
利用这个可以直接在网页当中需要的地方显示消息框，而且消息框的内容可以由开发人员动态指定。
上面案例是纯粹的html控件触发的事件。
在asp.net当中，要在服务器控件事件当中触发该js函数，可以用ClientScript.RegisterStartupScript。
ClientScript.RegisterStartupScript(this.GetType(), "", "<script>show('light','你好！这里是测试内容。这里的文字会显示在消息框当中。')</script>");
ClientScript.RegisterStartupScript是把相应的js代码嵌入到网页html流的末尾。
用Javascript弹出div定义的消息框并往块里面填写文字的更多相关文章
- [转]创建一个JavaScript弹出DIV窗口层的效果
本文转自:http://www.soso.io/article/23698.html <!doctype html> <html lang="en"> &l ...
- 创建一个弹出DIV窗口
创建一个弹出DIV窗口 摘自: http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 弹出div层
目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...
- html弹出div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 练习：javascript弹出框及地址选择功能,可拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript弹出窗口方法
本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才 ...
- js弹窗 js弹出DIV,并使整个页面背景变暗
1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...
- 运用fancybox弹出div的方式弹出视频界面
fancybox可以弹出很多窗体,甚至一个swf格式的小视频.但这样的swf视频播放的时候并没有任何的控件.只能重头看到尾,或者关闭.我们可以利用fancybox弹出div盒子的方式配合html5很快 ...
随机推荐
- javaweb-dbcp2
package cn.itcast.utils; import java.io.InputStream;import java.sql.Connection;import java.sql.Drive ...
- Ubuntu 环境变量及 ADB 配置
Ubuntu Linux 环境变量 同Windows一样,Ubuntu Linux系统包含两类环境变量:系统环境变量和用户环境变量.系统环境变量对所有系统用户都有效,用户环境变量仅仅对当前的用户有效. ...
- Python命名规范
Python 标识符 参见:https://docs.python.org/3/reference/lexical_analysis.html?highlight=identifier#identif ...
- Android布局大全
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面. 所有的布局方式都可以归类为ViewGroup的 ...
- NSNotificationCenter 的详细说明
1. 定义一个方法 -(void) update{ } 2. 对象注册,并关连消息 [[NSNotificationCenter defaultCenter] addObserver:se ...
- 让所有浏览器包括IE6即支持最大宽度又支持最小宽度。
让所有浏览器包括IE6即支持最大宽度又支持最小宽度. _height _width:针对ie6 css hack .yangshi{max-width:620px;min-width:1px;_wi ...
- iOS-TCP/IP、Http、Socket的区别
网络由下往上分为 物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 通过初步的了解,我知道IP协议对应于网络层,TCP协议对应于传输层,而HTTP协议对应于应用层, 三者从本质上来说没有可 ...
- js prototype新感悟
prototype是js的一个原型属性,这个属性可以创建对象属性和方法. 子类继承原型属性时,会继承父类的原型属性和方法. prototype只能作用到类上,不能作用到对象上. ----------- ...
- 世纪互联运营的Microsoft Azure正式支持FreeBSD虚拟机镜像
自2012年开始,微软云计算与企业事业部和Citrix思杰,NetApp达成合作,共同开发出第一版针对Hyper-V虚拟设备驱动以及相关的用户态程序,并将此称之为集成服务(Integration Se ...
- SqlServer 杂记 不断补充中
1.OPTION (MAXRECURSION 25) :最大允许递归的次数.默认最大CTE递归只有100次,而你要求插入10年的数据,需要递归3000多次,所以要使用option (MAXRECURS ...