jquery div模态窗口的简单实例


Posted in Javascript onMay 28, 2016

jquery 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>test</title>
  <script src="../../js/lib/jquery.js"></script>
  <style type="text/css">
    
  .pop-box { 
    /*弹出窗口后,弹出的DIV采用此CSS,保证置于最上层
     z-index控制Z轴的坐标,数值越大,离用户越近
    */ 
    z-index: 9999999; /*这个数值要足够大,才能够显示在最上层*/ 
    margin-bottom: 3px; 
    display: none; 
    position: absolute; 
    background: gray; 
    border: solid1px #6e8bde; 
  } 
   
  #bg { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    /*弹出窗口后,添加遮罩层,采用此CSS,将该层置于弹出DIV和页面层之间
     z-index控制Z轴的坐标,数值越大,离用户越近 rgba(72, 74, 68, 0.46)
    */ 
    z-index: 1001;  
    background-color:#8f9f8f;
    -moz-opacity: 0.7; 
    opacity: .70; 
    filter: alpha(opacity = 70); 
  } 
     
  </style>
  
  <script type="text/javascript">

  function popupDiv(div_id) { 
    // 获取传入的DIV 
    var $div_obj = $("#" + div_id); 
    // 计算机屏幕高度 
    var windowWidth = $(window).width(); 
    // 计算机屏幕长度 
    var windowHeight = $(window).height(); 
    // 取得传入DIV的高度 
    var popupHeight = $div_obj.height(); 
    // 取得传入DIV的长度 
    var popupWidth = $div_obj.width(); 
    
    // // 添加并显示遮罩层 
    $("<div id='bg'></div>").width(windowWidth * 0.99) 
        .height(windowHeight * 0.99).click(function() { 
          //hideDiv(div_id); 
        }).appendTo("body").fadeIn(200); 
    
    // 显示弹出的DIV 
    $div_obj.css({ 
      "position" : "absloute" 
    }).animate({ 
      left : windowWidth / 2 - popupWidth / 2, 
      top : windowHeight / 2 - popupHeight / 2, 
      opacity : "show" 
    }, "slow"); 
    
  } 
  /*隐藏弹出DIV*/ 
  function hideDiv(div_id) {
    $("#bg").remove(); 
    $("#" + div_id).animate({ 
      left : 0, 
      top : 0, 
      opacity : "hide" 
    }, "slow"); 
  } 
  </script>
  
</head>
<body> 

 <div id='pop-div' style="width: 300px;height:500px;" class="pop-box">
 <h4 class="pop-boxh4">22</h4>
 <div class="pop-box-body">
  <p>33</p>
 </div>
 <div id='buttonPanel' style="text-align: right"
  style="text-align:right">
  <input type="button" value="Close" id="btn1"
  onclick="hideDiv('pop-div');" />
 </div>
 </div>
 
 <input type="button" value="21" onclick="popupDiv('pop-div')"
 style="cursor: pointer;">
 <div>2222222333</div>
 <input type="text"></input>
</body>
</html>

以上这篇jquery div模态窗口的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Ajax()方法使用指南
Nov 19 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 #Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 #Javascript
js弹出窗口返回值的简单实例
May 28 #Javascript
JS获取子窗口中返回的数据实现方法
May 28 #Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 #Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 #Javascript
全面解析多种Bootstrap图片轮播效果
May 27 #Javascript
You might like
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
vue生成token并保存到本地存储中
2018/07/17 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python魔术方法详解
2015/02/14 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python 读取修改pcap包的例子
2019/07/23 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
文科教师毕业的自我评价
2014/01/16 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
云台山导游词
2015/02/03 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
浅谈Python协程asyncio
2021/06/20 Python