jquery-创建弹出框原理

最新推荐文章于 2021-01-28 04:30:30 发布

distantimg

最新推荐文章于 2021-01-28 04:30:30 发布

阅读量83

点赞数

文章标签： js css html jquery javascript

本文链接：https://blog.csdn.net/u012138854/article/details/109590915

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-创建弹出框</title>
<style>
*{margin:0; padding: 0;}
#login{ width: 300px; height: 300px; border: 1px solid red; position: relative;}
#close{width: 20px; height: 20px;background: red; position: absolute; right: 0; top:0; text-align: center;}
</style>
//<script src='引入script库'></script>
<script>
$(function(){

    $('#input1').click(function(){

     var ologin=$('<div id="login"><p>用户名:<input type="text"/></p><p>密码:<input type="text"/></p><div id="close">x</div> </div>')
     $('body').append(ologin);

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

      $(window).on('scroll resize', function(){
      ologin.css('left', ($(window).width()-ologin.outerWidth())/2);
      ologin.css('top', ($(window).height()-ologin.outerHeight())/2+$(window).scrollTop()); 
    });
            $('#close').click(function(){ologin.remove();});
      })
});
</script>
</head>
<body style="height: 2000px;">
<input type="button" value="点击" id="input1"/>
<!-- <div id="login">
      <p>用户名：<input type="text"/></p>
      <p>密码：<input type="text"/></p>
      <div id="close">x</div>
</div> -->
    
</body>
</html>

distantimg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-创建弹出框原理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery-创建弹出框</title><style>*{margin:0; padding: 0;}#login{ width: 300px...
复制链接

扫一扫