jQuery怎么弹出模式登录界面,谢谢!
发布网友
发布时间:2022-05-15 17:07
我来回答
共2个回答
热心网友
时间:2022-05-15 18:37
jQuery怎么弹出模式登录界面,这个很简单,我给你讲解一下关键技术。
jQuery 弹出框,其实是创建一个 div ,然后 定位 div ,用css 渲染div效果。
比如实例:
当点击 一个按钮,弹出一个 对话款,在网页中间。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('#show').click(function(){
var html ='<div id="windows">成功啦,这样总可以设我为最佳了吧?哈。^_*</div><div id="bg"></div>';
$('body').append(html);
var left = ($(document).width() - $('#windows').width()) /2;
$('#windows').css({left:left});
$('#bg').show().height( $(document).height() ).css({'opacity':0.7});
});
});
</script>
<style type="text/css">
html,body{margin: 0; padding: 0;}
#show{ padding:100px; font-size:36px;}
#windows { position:absolute; top:100px; left:50px; background: #CCC; width:500px; padding:20px; z-index:999; text-align:center;}
#bg{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; background:#000; }
</style>
</head>
<body>
<div id="show">点我啊</div>
</body>
</html>
---------------------------------------
代码是我大半夜手敲的哦,这样总可以吧?谢谢哦,你懂得。。。
热心网友
时间:2022-05-15 19:55
jQuery有很多关于模式弹窗的插件·
看看例子很容易上手·