<!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','&nbsp;&nbsp;&nbsp;&nbsp;你好！这里是测试内容。这里的文字会显示在消息框当中。')">打开</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定义的消息框并往块里面填写文字的更多相关文章

  1. [转]创建一个JavaScript弹出DIV窗口层的效果

    本文转自:http://www.soso.io/article/23698.html <!doctype html> <html lang="en"> &l ...

  2. 创建一个弹出DIV窗口

    创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...

  3. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  5. html弹出div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 练习：javascript弹出框及地址选择功能,可拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JavaScript弹出窗口方法

    本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才 ...

  8. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  9. 运用fancybox弹出div的方式弹出视频界面

    fancybox可以弹出很多窗体,甚至一个swf格式的小视频.但这样的swf视频播放的时候并没有任何的控件.只能重头看到尾,或者关闭.我们可以利用fancybox弹出div盒子的方式配合html5很快 ...

随机推荐

  1. 黑马程序员——【Java基础】——多线程

    ---------- android培训.java培训.期待与您交流! ---------- 一.概述 (一)进程 正在执行中的程序,每一个进程执行都有一个执行顺序.该顺序是一个执行路径,或者叫一个控 ...

  2. 转：Spring中@Autowired注解、@Resource注解的区别

    Pay attention: When using these annotations, the object itself has to be created by Spring context. ...

  3. 破解 crackme（“不可逆“函数）

    系统 : Windows xp 程序 : crackme 程序下载地址 :http://pan.baidu.com/s/1i41oh9r 要求 : 注册机编写 使用工具 : IDA Pro & ...

  4. ZOJ2006 (后缀自动机）

    求一个字符串的最小表示法. 将字符串S倍长,从根走length(s)步所走路径即为最小表示法. 记所到达位置为x,则这个最小表示法的起点为a[x]-len(s)+1 ; var T:longint; ...

  5. 微信公众号 SDK

    <?php /* 方倍工作室 http://www.fangbei.org/ CopyRight 2015 All Rights Reserved */ define("TOKEN&q ...

  6. 第一次div1做出3道题

    第一次div1做出3道题! 再接再厉! 哈利路亚!

  7. linode空间lamp环境的搭建

    安装LAMP的命令如下,请依次执行: apt-get updateapt-get upgrade –show-upgradedapt-get install apache2a2enmod rewrit ...

  8. 如何在magento后台增加一个自定义订单状态

    magento后台订单状态(order status)只有Pending.Processing.On Hold.Closed.Canceled.Pending Payment 等等,如何在magent ...

  9. AttributeError: 'module' object has no attribute 'TornadoAsyncNotifier'

    /*************************************************************************** * AttributeError: 'modu ...

  10. dedecms头部标签（标题，关键词，描述标签）(借用)

    先说说dedecms头部标题,关键词,描述标签的作用我相信网络上也有很多这样的信息,那为什么我还要写这个?因为这个对我们初学者来说还是比较重要的,因为做SEO就要用到这些标签.首先我写下首页头部标签我 ...