用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很快 ...
随机推荐
- php大力力 [031节] php设计系统后台菜单和样式设计
php大力力 [031节] php设计系统后台菜单和样式设计 耗掉我一整夜的时间,把后台html设计了一个,对于我这样的html白痴,实属不容易啊. 留下一点点网上查找的网页知识: 索马里论坛群发简介 ...
- Reverse Integer ---- LeetCode 007
Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 Solution ...
- 进程同步（二）—— 信号量&内存共享
内存共享是进程间常用的通信方式,可以实现两个完全独立的进程通信. 在访问共享内存时,同时需要信号量进行访问控制. 使用ipcs -m命令可以查看系统共享内存,ipce -m + key 可以删除指定的 ...
- jQuery基础学习笔记（1）
--------2.0以上版本体积更小. --------CDN 内容分发网络(Content delivery network或Content distribution network,常简写成C ...
- NSNumber 、 NSValue 、 日期处理 、 集合类 、 NSArray(一)
1 基本数据类型的封装 1.1 问题 我们所学的所有基本数据类型,如int.float.double.char等,都不是对象,不能向它们发送消息.然而,在Foundation中的许多类,如NSArra ...
- 织梦dedecms 用交叉栏目时arclist标签调用不出内容文章的问题(纯转载)
本文转自:http://www.cnblogs.com/cnteam/articles/4056702.html 最近用了交叉栏目发现当为手动指定交叉栏目ID时用arclist标签不能调出相关文章最后 ...
- Linux 常用命令笔记
Linux 常用命令笔记 1. locate locate:用来定位文件的位置,如:locate a.txt 但是这个命令有延迟,也就是新建的文件不一定能搜索到,如果非要找到新建的文件可以使用 upd ...
- JS基础知识（-）
1 , call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法 ...
- ion torrent ion proton
https://www.youtube.com/watch?v=6Is3W7JkFp8 NGS 的视频 说的不错 一个做癌症的教授讲的 Ion Torrent™ next-generation seq ...
- python 的 class
虽然python OOP 是可选的,但是尽可能使用OOP, 可以让你的代码更精简,容易理解. python 中大多数OOP故事, 都可简化为这个表达式: object.attribute 类的建立使用 ...