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有很多关于模式弹窗的插件·

看看例子很容易上手·