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 While 循环基础教程
Apr 05 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 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
apache php模块整合操作指南
2012/11/16 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
js 颜色选择插件
2017/01/23 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
会计自我鉴定
2013/11/02 职场文书
银行实习鉴定
2013/12/13 职场文书
国际商务专业求职信
2014/07/15 职场文书
维稳工作承诺书
2015/01/20 职场文书
幼儿园辞职信
2015/05/13 职场文书
实验室安全管理制度
2015/08/05 职场文书
车间安全生产管理制度
2015/08/06 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python