jQuery教程

怎么实现jquery弹窗，代码自取

本文主要是介绍怎么实现jquery弹窗，代码自取，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

    今天给大家说一说怎么实现jquery弹窗，有需要的同学可以作为参考，说不多说直接上代码：

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>弹窗</title>

  <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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弹窗的全部内容，希望对大家的学习有所帮助，更多内容还可关注慕课网~

这篇关于怎么实现jquery弹窗，代码自取的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航