jquery实现一个简单好用的弹出框_jquery-js教程-PHP中文网

首页

web前端

js教程

jquery实现一个简单好用的弹出框_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:35 PM

jquery弹出框

自己改写一些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 id="登录-是一种态度">登录 是一种态度</h3> 
</div> 
<!-- 中间主体显示div 可以增加其他的样式--> 
<div class="login-body dform"> 
<form class="signin" name="loginform" action="" method="post"> 
<ol> 
<li><h4 id="你必须先登录">你必须先登录！</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">底部部分文字显示哦

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn