`
crabdave
  • 浏览: 1294857 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

页面弹出提示框，背景元素不可操作 示例

    博客分类：
  • Web
HTML 
阅读更多

页面弹出提示框，背景元素不可操作 示例

效果：

HTML源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>弹出提示框，背景元素不可操作！</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
 #messages{
 position:absolute;
 left:expression((body.clientWidth-180)/2);
 top:expression((body.clientHeight-100)/2);
 width:180px;
 height:100px;
 z-index:2;
 background:white;
 visibility:hidden
 }

 #content{
 position:absolute;
 top:0;
 left:0;
 width:expression(body.scrollWidth);
 height:expression(body.scrollHeight);
 background:#666;
 filter:ALPHA(opacity=60);
 z-index:1;
 visibility:hidden
 }
  </style>

  <script>
   function showMessages(){
  document.getElementById("messages").style.visibility='visible';
  document.getElementById("content").style.visibility='visible';
   }
   function exitsMessages(){
  document.getElementById("messages").style.visibility='hidden';
  document.getElementById("content").style.visibility='hidden';
   }
  </script>

 </HEAD>
 <BODY>
  <div id="messages">         
   <table width='100%' height='100%'>
       <tr style='background:#036;height:10'>
      <td nobr>
        <div style="display:inline; width:150px; position:absolute"> <font size='2' color='red' align='left'> Attention!</font></div>
     <span style="float:right; display:inline; cursor:hand;color:white"  onclick='exitsMessages();'>×</span>
    
      </td>
    </tr>
    <tr>
      <td align='left'>
       <ul style='font-size:12'>
     <li>
      Attentions 1
     </li>
     <li>
      Attentions 2
     </li>
       </ul>
      </td>
    </tr>
   </table>
  </div>

 <div id="content"></div>

 <table width='100%' height='100%'>
  <tr>
   <td valign='middle' align='center'><!--实现水平、垂直居中对齐-->
  <table>
     <tr>
       <td align='right'>Login Name:</td>
    <td><input type='text' value='' size='20'/></td>
     </tr>
     <tr>
       <td align='right'>E-mail:</td>
    <td><input type='text' value='' size='20'/></td>
     </tr>
     <tr>
       <td align='right'>Password:</td>
    <td><input type='password' value='' size='20'/></td>
     </tr>
     <tr>
       <td align='right'>Confirm Password:</td>
    <td><input type='password' value='' size='20'/></td>
     </tr>
     <tr>
       <td colspan='2' align='center'><input type='button' value='Submit' onclick='showMessages()'/></td>
     </tr>
  </table>
   </td>
  </tr>
 </table>

 </BODY>
</HTML>

分享到：
| ExtJS TreeCheckNodeUI组件的使用 示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery适用于手机端的弹出提示框代码.zip

    在移动设备上，提供良好的用户体验是至关重要的，而弹出提示框是用户交互中的常见元素。这个名为"jQuery适用于手机端的弹出提示框代码.zip"的压缩包包含了一个专门针对手机端优化的jQuery弹出提示框解决方案。下面，...

    JQuery实现对话框效果 即弹出对话框背景变暗且不可操作

    总结来说，通过结合jQuery和CSS，我们可以轻松实现一个对话框效果，使得在弹出对话框时背景变暗且不可操作。这个效果不仅提高了交互性，还为用户提供了一个更专业、更集中的浏览体验。在实际应用中，你可以根据需要...

    自定义弹出框提示框确认弹框

    在软件开发中，自定义弹出框提示框和确认弹框是常见的用户界面元素，用于向用户展示重要的信息、请求用户的确认或输入。这些组件在交互设计中扮演着至关重要的角色，因为它们能够中断用户的操作流程，吸引注意力，并...

    jQuery弹出层 可移动层 提示框 浮动层

    本文将深入探讨jQuery弹出层的实现原理，以及如何构建可移动的提示框和浮动层。 首先，我们来理解jQuery弹出层的基本概念。弹出层是指在用户进行特定操作时，页面上突然出现的一个独立显示区域，它可以是信息提示、...

    Web弹出框实例

    总之，Web弹出框是网页交互中不可或缺的一部分。通过掌握JavaScript原生弹出框和自定义弹出框的创建方法，我们可以根据项目需求创建功能丰富、样式独特的弹出框，提升用户的交互体验。在实际开发中，可以根据压缩包...

    delphi2010实现弹出MSNPopup提示框示例代码

    实现Windows XP/7等操作系统桌面右下角弹出类似MSN的popup提示框，可定时自动关闭，自动叠加显示，自定义背景图片等。使用了DELPHI盒子(2ccc)的MSNPopup 5.0的组件，修改了背景颜色(图片)不能填满窗体的bug。压缩包...

    jQuery弹出提示框

    jQuery弹出提示框是网页开发中常用的一种交互元素，它能提供信息反馈、用户确认或错误提示等功能。在本教程中，我们将深入探讨如何利用jQuery和相关CSS样式创建美观且功能丰富的对话框。 首先，jQuery是一款强大的...

    js+css实现点击弹出提示框

    在网页开发中，提示框是不可或缺的交互元素，用于向用户显示信息、警告或确认操作。本教程将探讨如何利用JavaScript（简称JS）和CSS来实现一个点击后弹出的提示框，这样的功能广泛适用于各种网页应用，包括PHP驱动的...

    IOS弹出提示框

    `yourSourceView`和`yourSourceRect`应根据实际需求设置为触发弹出提示框的视图及其在屏幕上的位置。 5. 显示提示框： 最后，在适当的上下文中呈现UIAlertController： ```swift present(alertController, ...

    一个简易的弹出框的框架，实现各种弹出层

    在IT领域，弹出框和对话框是用户界面（UI）设计中不可或缺的元素，它们用于向用户提供信息、获取输入或者执行特定操作。本项目提供了一个简易的弹出框框架，名为"layer-v1.6.0"，它能够帮助开发者轻松地实现各种类型...

    JS实时弹出新消息提示框并有提示音响起的实现代码

    本文介绍的内容涉及到在网页中实现新消息提示框的弹出和提示音响起的功能。实现这一功能主要依靠JavaScript（JS）和AJAX技术，以及音频播放和动态显示新消息提示框的方法。 知识点一：AJAX技术 AJAX（Asynchronous ...

    Div 弹出信息框例子

    在网页设计中，"Div 弹出信息框例子"是一个常见的需求，用于向用户展示重要的提示、警告或者交互信息。Div元素是HTML中的一个布局工具，全称为...通过不断实践和优化，Div弹出框可以成为网页设计中不可或缺的一部分。

    jQuery弹出消息提示框

    2. **jQuery UI和Bootstrap**：jQuery本身并不直接提供弹出消息提示框的功能，但可以通过引入jQuery UI或Bootstrap库来实现。jQuery UI的`dialog()`方法可以创建可自定义的对话框，而Bootstrap的`modal`组件则提供了...

    jquery弹出框 提示框实例

    在网页设计中，弹出框和提示框是不可或缺的元素，它们用于警告、确认、询问或者展示详细信息。下面我们将深入探讨这个话题。 首先，jQuery提供了几种内置的弹出功能，如`.alert()`, `.confirm()`, 和 `.prompt()`，...

    Jquery弹出提示框

    首先，我们需要在页面中添加一个用于弹出提示框的HTML元素，例如一个div： ```html &lt;p id="alert-message"&gt;&lt;/p&gt; 确定 ``` 这里，`hidden`类可以设置为CSS中的`display: none;`，使得提示框默认不显示。 #### ...

    JS弹出层对话框,Tooltip提示,Msg消息框

    JS弹出层对话框插件源码，包含弹出层对话框和Tooltip提示框，消息框等多种功能，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器）。内置4种颜色的皮肤，且可以自定义对话框样式，可设置对话框位置。Tooltip可以...

    弹出层示例或一个页面多处弹出层

    综上所述，弹出层是网页设计中不可或缺的一部分，正确地运用和管理弹出层可以极大地提升用户体验。在实际应用中，我们需要根据具体需求选择合适的设计方案和技术实现，并时刻关注用户体验，避免过度依赖或滥用弹出层...

    extjs弹出框 n秒后消失

    在EXTJS中，弹出框（也称为警告、信息或确认对话框）是用户界面交互的重要组成部分，常用于向用户提供信息、警告或者等待用户确认操作。实现EXTJS弹出框在n秒后自动消失，我们可以利用EXTJS的定时器（Ext.util....

    右下角弹出提示框

    在提供的"WindowsFormsApplication1"文件中，很可能是用C#编写的一个简单的Windows Forms应用示例，展示了如何在右下角弹出提示框。这个项目可能包含了窗体设计、事件处理和API调用等关键部分。通过打开和分析源代码...

    lhgdialog弹出层,遮罩层效果源码示例

    在lhgdialog中，你可以创建多种弹出层样式，比如普通对话框、提示信息、确认框等。这些弹出层可以在用户的操作后出现，如点击按钮、链接或满足特定条件时。弹出层的设计能够避免用户离开当前页面，方便他们处理额外...

Magicbox
Global site tag (gtag.js) - Google Analytics