简单实现jQuery弹窗效果


Posted in jQuery onOctober 30, 2017

本文实例为大家分享了jQuery弹窗效果展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>弹窗</title>
  <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>

  <style type="text/css">
   *{margin: 0px;padding: 0px;}
   #login{height:300px;width: 300px;border: 1px solid #ddd;position: absolute; }
   #close{position: absolute;right: 0px;top: 0px;}
  </style>


  <script type="text/javascript">

  // JS创建一个div标签,也就是节点元素
  // window.onload=function(){
  //  document.createElement('div');
  // }

  // 使用jQuery创建:$('<div>');带尖括号的是创建,不带是选择的意思
  $(function(){
   // var oDiv=$('<div>');
   // $('body').append(oDiv);

   $('input').click(function(){
   var oLogin=$('<div id="login"><p>用户名<input type="text"></p><p>密码<input type="text"></p><div id="close">X</div></div>');//此功能就相当于body中注释的代码

   $('body').append(oLogin);
   oLogin.css('left',($(window).width()-oLogin.outerWidth())/2);
   oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);//是弹窗能够出现在浏览器的中间

   $("#close").click(function(){
    oLogin.remove();
   })

   // jquery 中$()里window不用加引号
   // 添加resize()浏览器窗口大小改变
   // scroll():滚动条,以下的作用是当滚动条滚动时候,弹窗的位置也不变化
   $(window).on("resize scroll",function(){
    oLogin.css('left',($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());
    oLogin.css('top',($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop());
   })

   });

  });

  </script>
</head>
<body>
 <input type="button" value="点击">
 <!-- <div id="login">
  <p>用户名<input type="text"></p>
  <p>密码<input type="text"></p>
  <div id="close">X</div>
 </div> -->
</body>
</html>

用到的点:

jQuery创建:$('<div>');

弹窗的位置:

oLogin.css('left',($(window).width()-oLogin.outerWidth())/2);
oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);

当滚动条滚动时候,弹窗的位置变化:

$(window).on("resize scroll",function(){
oLogin.css('left',($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());
oLogin.css('top',($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop());
   })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 #jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 #jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 #jQuery
jquery ajax异步提交表单数据的方法
Oct 27 #jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
You might like
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python 连接各类主流数据库的实例代码
2018/01/30 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
浅析Python requests 模块
2020/10/09 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
预备党员思想汇报范文
2013/12/29 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis