用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很快 ...
随机推荐
- 黑马程序员——【Java基础】——面向对象（二）异常机制、包（Package）
---------- android培训.java培训.期待与您交流! ---------- 一.异常机制 (一)异常概述 1.异常:就是程序在运行时出现不正常情况. 2.异常类:程序在运行时,出现的 ...
- python 优雅的使用正则表达式 ~ 1
正则表达式简介 正则表达式 , 也称谓 REs , 本质上是一个微小且高度专业化的编程语言. 他被嵌入到许多语言当中 , 例如 python 就是通过 re 模块来提供给我们使用 , 正则表达式 是通 ...
- vijos 1779 国王游戏
练了一下高精度..结果敲了这么久... #include<iostream> #include<cstdio> #include<cstring> #include ...
- Angularjs相关理论
1.AngularJS的工作流程: (1)浏览器载入HTML,然后把它解析成DOM (2)浏览器载入angularjs脚本 (3)AngularJS等到DOMContentLoaded事件触发 (4) ...
- # 20145210 《Java程序设计》第02周学习总结
教材学习内容总结 本周我对教材第三章进行了学习,第三章对Java语言的语句.语法.类型.变量的定义等内容进行了比较详细的说明,相比之前的第一章和第二章,我觉得这一章还是比较好理解的,比较容易被接受.J ...
- jquery 轮播图
slider.js (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index ...
- PowerShell 语法结构
Get-Service -name P* [int]$a = 2 write-output $a [string]$b = "string" write-output $b #$c ...
- PHP 的snmp各个版本的Wrapper封装类
原文来自:http://blog.chinaunix.net/uid-7654720-id-3211234.html class SNMP_Wrapper { protected $_host; pr ...
- LeetCode Minimum Path Sum （简单DP）
题意: 给一个n*m的矩阵,每次可以往下或右走,经过的格子中的数字之和就是答案了,答案最小为多少? 思路: 比较水,只是各种空间利用率而已. 如果可以在原空间上作修改. class Solution ...
- eclipse中文乱码
问题描述: 在导入log4j.properties文件时里面出现中文乱码,如下: ### 设置### log4j.rootLogger = debug,stdout,D,E ### è¾å ...