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 相关文章推荐
js DataSet数据源处理代码
Mar 29 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
jquery datatable服务端分页
Aug 31 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
js模拟实现百度搜索
Jun 28 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
PHP中设置时区方法小结
2012/06/03 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
python解析文件示例
2014/01/23 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
个人简历的自荐信
2013/10/23 职场文书
四查四看剖析材料
2014/02/14 职场文书
终止劳动合同协议书
2014/10/05 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
怎样写离婚协议书
2015/01/26 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers