简单实现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绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
Python使用指定端口进行http请求的例子
2019/07/25 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
一道Delphi面试题
2016/10/28 面试题
入党推优材料
2014/06/02 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
签约仪式致辞
2015/07/30 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android