简单实现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 zTree树插件动态加载实例代码
May 11 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 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中单引号与双引号的区别分析
2014/08/19 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
js中parseInt函数浅谈
2013/07/31 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Tensorflow 实现释放内存
2020/02/03 Python
python3实现简单飞机大战
2020/11/29 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
货代行业个人求职简历的自我评价
2013/10/22 职场文书
银行实习生的自我评价
2013/12/09 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL