简单实现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判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery插件实现图片悬浮
Apr 16 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 一元分词算法
2009/11/30 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
vue内置指令详解
2018/04/03 Javascript
js实现开关灯效果
2020/03/30 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python并发和异步编程实例
2018/11/15 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python 画出来六维图
2019/07/26 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python yield和Generator函数用法详解
2020/02/10 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
会计出纳岗位职责
2013/12/25 职场文书
英文求职信范文
2014/05/23 职场文书
护士求职信范文
2014/05/24 职场文书
经济国贸专业求职信
2014/06/18 职场文书
团拜会主持词
2015/07/04 职场文书
请假条应该怎么写?
2019/06/24 职场文书