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 相关文章推荐
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
关于JS管理作用域的问题
2013/04/10 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
python解析xml文件实例分享
2013/12/04 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
python写一个md5解密器示例
2018/02/23 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
python实现文本界面网络聊天室
2018/12/12 Python
python 5个顶级异步框架推荐
2020/09/09 Python
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
大学生入党思想汇报
2014/01/14 职场文书
安全隐患整改报告
2014/11/06 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
毕业班工作总结
2015/08/10 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
Python使用openpyxl模块处理Excel文件
2022/06/05 Python