ホームページ > 記事 > ウェブフロントエンド > jquery はシンプルで使いやすいポップアップを実装します。
jquery はシンプルで使いやすいポップアップを実装します。
- WBOYオリジナル
- 2016-05-16 16:35:251326ブラウズ
私はいくつかの jquery コードを書き直し、将来仕事で使用するために比較的使いやすい jquery ポップアップ ボックスをまとめました。気に入ったら受け取ってください！
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现弹出登陆窗口</title>
<script src="./jquery-1.11.1.min.js"></script><!--本地的 一定要引进jquery才有效哦 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
<script>
jQuery(document).ready(function($) {
$('.login').click(function(){ //jquery的点击事件
$('.body-color').fadeIn(100);//全局变得黑的效果，具体的div就是theme-popover-mask这个
$('.hide-body').slideDown(200);//将隐藏的窗口div显示出来
})
$('.close-window .close').click(function(){
$('.body-color').fadeOut(100);//
$('.hide-body').slideUp(200);//将显示的窗口隐藏起来
})
})
</script>
</head>
<!-- 整个弹出框分为三个主体，一个是关闭的div 一个中间主要显示的div 最后一个就是增加其他内容的div -->
<body>
<div>
<!-- 这就是点击事件的触发，其中 theme-login是可以修改的 -->
<a class="login btn" href="javascript:;">点击查看效果</a>
</div>
<div class="hide-body">
<div class="close-window">
<!-- 关闭窗口，也就是触发关闭div的事件-->
<a href="javascript:;" title="关闭" class="close">×</a>
<h3>登录 是一种态度</h3>
</div>
<!-- 中间主体显示div 可以增加其他的样式-->
<div class="login-body dform">
<form class="signin" name="loginform" action="" method="post">
<ol>
<li><h4>你必须先登录！</h4></li>
<li><label for="username">用户名：</label><input class="ipt"
type="text" id="username" value="lnc" size="20" /></li>
<li><label for="password">密 码：</label><input
class="ipt" type="password" id="password" value="***********"
size="20" /></li>
<li><input class="btn btn-primary" type="submit" name="submit"
value=" 登 录 " /></li>
</ol>
</form>
</div>
<!-- 底部的div -->
<div class="bottom">
<hr>
<pre class="brush:php;toolbar:false">底部部分文字显示哦