您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jquery实现一个简单好用的弹出框
作者：佚名 责任编辑：admin 更新时间：2022-06-22
自己改写一些jquery的部分代码，自己总结出来一个比较好用的jquery弹出框，留着以后工作时候再用。喜欢就拿走吧！
代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 <!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>底部部分文字显示哦</pre> </div> </div> <div class="body-color"></div> </body> </html> <style> .btn { position: relative; cursor: pointer; display: inline-block; vertical-align: middle; font-size: 12px; font-weight: bold; height: 27px; line-height: 27px; min-width: 52px; padding: 0 12px; text-align: center; text-decoration: none; border-radius: 2px; border: 1px solid #ddd;- 上一个程序编程： php，js，css字符串截取的办法集锦
- 下一个程序编程： jQuery对val和atrr(value)赋值的区别介绍
