`
desert3
  • 浏览: 2159525 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

弹出层 覆盖层

阅读更多
<!-- 要弹出的项目,放在一个div中 -->
<div style="width:550px;border:2px #ecf6fc solid;display:none;top:20%;left:20%;background:#fff;font-size:14px;position:relative;" id="pay_note_body">
  <div style="margin:20px;">
    <html-el:form action="/manager/Pay.do">
      <html-el:hidden property="method" value="out" />
      
      <table width="100%" border="0" cellpadding="0" cellspacing="1" class="datagrid">
        <tr>
          <th colspan="2" align="center">添加物流信息</th>
        </tr>
        <!-- 相关项目 -->
        <tr>
           <td>&nbsp;</td>
          <td align="center"><html-el:button property="dist_save" styleClass="an"  value=" 保存  " styleId="dist_save" />
            <html-el:button property="back" styleClass="an" value=" 关闭 " styleId="btn_close_2" /></td>
        </tr>
      </table>
    </html-el:form>
  </div>
</div>

<script type="text/javascript" src="${ctx}/javascripts/lightBox.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
	//覆盖层
	var pay_note_body = new LightBox("pay_note_body");
	pay_note_body.Over = true;  //是否启用覆盖层  :true 、 false;
	pay_note_body.OverLay.Color = "#000"; //覆盖层颜色 ,必须启用覆盖层才有作用
	pay_note_body.OverLay.Opacity = 10; //覆盖层透明度 
	pay_note_body.Fixed = true; // 是否定位
	pay_note_body.Center = true; //是否居中
	
	$("#btn_close_2").click(function(){
	    // 关闭覆盖层	
            pay_note_body.Close();
	});
        // 弹出覆盖层
        pay_note_body.Show();

});
//]]></script>
分享到:
评论

相关推荐

    弹出层居中

    6. 遮罩层:在弹出层之外,通常会有一个半透明的遮罩层覆盖整个页面,以突出弹出层。这个遮罩层也需要适当地居中和调整大小。 7. 兼容性考虑:在编写代码时,要考虑不同浏览器的兼容性,确保在所有目标平台上都能...

    弹出层封装_1

    遮罩层是在弹出层出现时覆盖在页面上的半透明背景,起到隔离弹出层与页面其他元素的作用,防止用户误操作。它有助于提高弹出层的视觉焦点,让用户专注于当前的任务。在“弹出层封装_1”中,遮罩层可能会配合弹出层一...

    js弹出窗口、弹出层

    弹出层,也被称为模态对话框,是在当前页面上覆盖一层半透明或全屏的元素,焦点被锁定在这一层,用户必须先关闭弹出层才能继续与页面交互。实现弹出层的方式有很多种,包括但不限于HTML、CSS和JavaScript的组合使用...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    弹出层通常是一个在页面上覆盖一层半透明背景,并显示特定内容的元素,如警告信息、表单或图片等。这种效果可以通过CSS样式和JavaScript/jQuery来实现。在jQuery中,我们可以监听用户的鼠标点击事件,然后动态创建或...

    jquery弹出层

    弹出层,也称为浮层或模态对话框,是在网页上覆盖一层半透明或全屏的元素,通常用于显示警告、表单、图片或其他内容。这种设计模式可以提高用户体验,因为它允许用户在查看或操作新内容的同时,保留对原始页面的上...

    弹出层示例展示

    比如,使用`position: fixed`可以让弹出层始终位于屏幕中央,`z-index`属性则决定了弹出层是否能覆盖其他元素。 3. **jQuery插件**:如`jQuery UI`或`bootstrap modal`提供了弹出层的现成解决方案,简化了开发过程...

    18种非常实用的js弹出层

    弹出层是一种在主页面上覆盖一层半透明或不透明的遮罩,突出显示特定内容的交互设计。它通常包含关闭按钮或其他交互元素,让用户能够返回原来的页面。 1. **基本HTML结构**:弹出层的基本结构通常包括一个容器元素...

    jQuery弹出层

    - **模态对话框(Modal Dialog)**: 弹出层覆盖在页面内容之上,阻止用户与背景页面交互,直到对话框关闭。 - **非模态对话框(Non-modal Dialog)**: 用户可以继续与背景页面交互,弹出层只是提供额外信息或操作...

    弹出层示例

    遮罩层则是弹出层的一个组成部分,通常是一个覆盖在页面上的黑色或灰色半透明层,它的作用是降低背景内容的可见性,从而突出弹出层的重要性。遮罩层的存在可以有效地防止用户在弹出层出现时误操作其他区域,提供了一...

    微博弹出层

    微博弹出层是一种常见的网页交互设计,主要用于展示重要的信息或者进行特定操作的确认,比如广告、通知、登录窗口等。这种设计通常会以一个半透明的遮罩层覆盖整个页面,然后在合适的位置显示弹出的内容,使得用户能...

    html5手机端点击弹出层

    弹出层(通常称为弹窗或模态框)是在网页上创建的一个半透明或者全屏覆盖的独立区域,当用户触发特定事件(如点击按钮)时,这个区域会突然出现,吸引用户的注意力。在移动设备上,弹出层的设计需要考虑到屏幕大小和...

    底部弹出层

    3. 遮罩层:用于半透明覆盖整个页面,让用户无法与背景交互,集中注意力在弹出层上。 示例代码: ```html &lt;!-- 这里放置弹出层的具体内容 --&gt; 选项1 选项2 &lt;div class="modal-overlay"&gt;&lt;/div&gt; ``` 二、...

    相当实用的弹出层+信息翻页显示

    在"相当实用的弹出层"中,用户点击页面上的图片或其他触发元素后,会有一个新的层(通常半透明或全屏)覆盖在原有页面上,显示更详细的内容。弹出层的设计应当注重易用性,确保关闭按钮明显,且不影响用户对原有页面...

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

    遮罩层通常用于在弹出层出现时覆盖整个网页,给用户一种聚焦和隔离的感觉。它降低了用户对背景内容的关注度,使弹出层成为焦点。lhgdialog提供了带遮罩层的弹出层效果,可以设置遮罩层的透明度和颜色,以达到理想的...

    一个简单好用的弹出层

    1. **定义与用途**:弹出层(Modal)是一种浮动窗口,它覆盖在网页主要内容之上,以吸引用户注意力并提供额外的功能或信息。常见的应用场景包括登录/注册表单、消息提示、图片预览、选项设置等。 2. **实现技术**:...

    js透明弹出层

    在本主题中,我们聚焦的是“js透明弹出层”,这是一种常见于网页设计中的功能,它允许在不刷新整个页面的情况下,显示一个覆盖在原有页面上的半透明对话框,用于提示信息、展示详情或接收用户输入。 创建js透明弹出...

    js 弹出层之间值得传递

    在JavaScript(JS)开发中,弹出层常用于显示详细信息、用户输入或者进行操作确认,它们通常是页面上的浮动元素,可以覆盖一部分或全部主页面内容。实现弹出层之间的值传递是提升用户体验和功能交互性的重要手段。...

    简单实用的jquery可拖动弹出层,遮罩层

    遮罩层通常是一个半透明的div元素,覆盖在网页内容之上,用于突出显示弹出层或者阻止用户与背景内容交互。它提供了一种优雅的方式来聚焦用户的注意力,使得弹出层的内容更为突出。 在“描述”中提到,这款弹出层...

    js与css实现弹出层覆盖整个页面的方法.docx

    "js与css实现弹出层覆盖整个页面的方法" 本文主要介绍了使用 JavaScript 和 CSS 实现弹出层覆盖整个页面的方法,并提供了实例代码和详细的解释。这篇文章将帮助读者了解如何使用 JavaScript 和 CSS 实现弹出层,...

Global site tag (gtag.js) - Google Analytics