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