用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很快 ...
随机推荐
- 详解定位—>"position"
position是css中一个重要的属性,他规定元素的定位类型,默认值为static,他的值有5种,absolute,fixed,relative,static,inherit.接下来将详细具体对每一 ...
- 链表操作----将单链表向右旋转 K 个位置
给定一个单链表,设计一个算法实现链表向右旋转 K 个位置. 举例: 给定 1->2->3->4->5->6->NULL, K=3 则 4->5-> ...
- 【LeetCode OJ】Best Time to Buy and Sell Stock III
Problem Link: http://oj.leetcode.com/problems/best-time-to-buy-and-sell-stock-iii/ Linear Time Solut ...
- Xcode7推出的新优惠:免证书测试
1.准备 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题:could not find developer disk image 2.首先先安装Xco ...
- PostgreSQL高可用性、负载均衡、复制与集群方案介绍
目录[-] 一.高可用性.负载均衡.复制的几个方案比较: 二.多节点集群方案比较 9.3官方文档(中文):http://58.58.27.50:8079/doc/html/9.3.1_zh/high- ...
- CentOS 6.6 中设置Terminal快捷键
排版比较乱,参见 https://www.zybuluo.com/Jpz/note/144583 CentOS 6.6 中设置Terminal快捷键 Linux开发环境配置 Terminal是Cent ...
- iPhone4@iOS7Beta4，第一时间刷上，失望，看来苹果是铁了心往扁平化UI走了。看好我的614，保存好SHSH准备
1 今天早上看到新闻,iOS7Beta4放出了,于是赶紧,在家下载,网速很快.(要是在公司,那50K的速度,估计会疯的) 2 等了一会儿一直在提示准备安装,不等了,再等该迟到了. 3 路上实在忍不住, ...
- 利用URLScan工具过滤URL中的特殊字符（仅针对IIS6）-- 解决IIS短文件名漏洞
IIS短文件名漏洞在windows服务器上面非常常见,也就是利用“~”字符猜解暴露短文件/文件夹名,比如,采用这种方式构造URL:http://aaa.com/abc~1/.aspx,根据IIS返回的 ...
- C++程序结构---1
C++ 基础教程Beta 版 原作:Juan Soulié 翻译:Jing Xu (aqua) 英文原版 本教程根据Juan Soulie的英文版C++教程翻译并改编. 本版为最新校对版,尚未定稿.如 ...
- php部分--题目：投票
1.建立两个表格:要显示百分比的话,就要在选项表中加上一列标记number 2.链接数据库,并对题目和选项进行显示 <?php $db=new MySQLi("localhost&qu ...