jquery点击之后弹出登录界面输入帐号密码

来源：互联网 2023-03-16 23:54:48 484

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

jquery点击之后弹出登录界面输入帐号密码

书写hmtl代码。

div class="theme-buy">

a class="btn btn-primary btn-large theme-login" href="javascript:;">点击查看效果/a>

/div>

div class="theme-popover">

div class="theme-poptit">

a href="javascript:;" title="关闭" class="close">×/a>

h3>登录是一种态度/h3>

/div>

div class="theme-popbod dform">

form class="theme-signin" name="loginform" action="" method="post">

ol>

li>h4>你必须先登录！/h4>/li>

li>strong>用户名：/strong>input class="ipt" type="text" name="log" value="用户名" size="20" />/li>

li>strong>密码：/strong>input class="ipt" type="password" name="pwd" value="***" size="20" />/li>

li>input class="btn btn-primary" type="submit" name="submit" value=" 登录 " />/li>

/ol>

/form>

/div>

div class="theme-popover-mask">/div>

jquery点击之后弹出登录界面输入帐号密码

书写css代码。

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, del, dfn, em, img, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, button, input, table, caption, tbody, tfoot, thead, tr, th, td, menu { margin: 0; padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block }

audio, canvas, video { display: inline-block; *display:inline;

*zoom:1

}

audio:not([controls]) { display: none }

table { border-collapse: collapse; border-spacing: 0; empty-cells: show }

ol, ul, menu { list-style: none }

img { border: 0 }

a:focus { outline: none }

em, i { font-style: normal; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: -3px; outline: none; }

button, input { border: 1px solid; outline: none; line-height: normal; *overflow:visible

}

button::-moz-focus-inner, input::-moz-focus-inner {

border:0;

padding:0

}

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -appearance: button }

input[type="search"] { -appearance: textfield; -box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box }

input[type="search"]::-search-decoration {

-appearance:none

}

textarea { overflow: auto; vertical-align: top }

::selection { background: #72d0eb; color: #fff; text-shadow: none }

::-moz-selection {

background:#72d0eb;

color:#fff;

text-shadow:none

}

*[hidden] { display: none }

a { color: #0088DB; text-decoration: none; cursor: pointer }

a:hover { color: #2A5E8E }

.clearfix:after, .central:after, .widget ul:after, .paging:after, .pagenav:after, .base-tit:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }

.clearfix, .central, .widget ul, .paging, .pagenav, .base-tit { * height:1%;

}

body, button, input, select, textarea, code { font-size: 12px; font-family: microsoft yahei; color: #444; }

.ipt { border: solid 1px #d2d2d2; border-left-color: #ccc; border-top-color: #ccc; border-radius: 2px; box-shadow: inset 0 1px 0 #f8f8f8; background-color: #fff; padding: 4px 6px; height: 21px; line-height: 21px; color: #555; width: 180px; vertical-align: baseline; }

.ipt-mini { width: 140px; padding: 1px 3px; }

.ipt:focus { border-color: #95C8F1; box-shadow: 0 0 4px #95C8F1; }

.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; color: #666; background-color: #f5f5f5; background: -linear-gradient(top, #F5F5F5, #F1F1F1); background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1); background: linear-gradient(top, #F5F5F5, #F1F1F1); }

input.btn { height: 29px; }

.btn:hover { border-color: #c6c6c6; color: #333; background-color: #f8f8f8; background: -linear-gradient(top, #f8f8f8, #f1f1f1); background: -moz-linear-gradient(top, #f8f8f8, #f1f1f1); background: linear-gradient(top, #f8f8f8, #f1f1f1); box-shadow: #ddd 0 1px 1px 0; }

.btn:active, .btn.btn-active { box-shadow: #ddd 0 1px 2px 0 inset; border-color: #c6c6c6; }

.btn:focus { border-color: #4d90fe; outline: none }

.btn-primary { border-color: #3079ED; color: #F3F7FC; background-color: #4D90FE; background: -linear-gradient(top, #4D90FE, #4787ED); background: -moz-linear-gradient(top, #4D90FE, #4787ED); background: linear-gradient(top, #4D90FE, #4787ED); }

.btn-primary:hover { border-color: #2F5BB7; color: #fff; background-color: #4D90FE; background: -linear-gradient(top, #4D90FE, #357AE8); background: -moz-linear-gradient(top, #4D90FE, #357AE8); background: linear-gradient(top, #4D90FE, #357AE8); }

.btn-primary:active, .btn-primary.btn-active { box-shadow: #2176D3 0 1px 2px 0 inset; border-color: #3079ED; }

.btn-primary:focus { border-color: #4d90fe; outline: none }

.theme-buy { margin-top: 10%; text-align: center; }

.theme-gobuy, .theme-signin { font-size: 15px; }

.theme-price { position: relative; bottom: -6px; font-family: microsoft yahei, Arial, Helvetica, sans-serif; margin-right: 20px; font-weight: bold; color: #f60; line-height: 32px; font-size: 24px; display: inline-block; }

.theme-price dfn { font-style: normal; font-size: 18px; margin-right: 2px; }

.theme-desc { padding: 30px; }

.theme-version { padding: 30px; }

.theme-popover-mask { z-index: 9998; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); display: none }

.theme-popover { z-index: 9999; position: fixed; top: 50%; left: 50%; width: 660px; height: 360px; margin: -180px 0 0 -330px; border-radius: 5px; border: solid 2px #666; background-color: #fff; display: none; box-shadow: 0 0 10px #666; }

.theme-poptit { border-bottom: 1px solid #ddd; padding: 12px; position: relative; }

.theme-popbod { padding: 60px 15px; color: #444; height: 148px; }

.theme-popbom { padding: 15px; background-color: #f6f6f6; border-top: 1px solid #ddd; border-radius: 0 0 5px 5px; color: #666 }

.theme-popbom a { margin-left: 8px }

.theme-poptit .close { float: right; color: #999; padding: 5px; margin: -2px -5px -5px; font: bold 14px/14px simsun; text-shadow: 0 1px 0 #ddd }

.theme-poptit .close:hover { color: #444; }

.btn.theme-reg { position: absolute; top: 8px; left: 43%; display: none }

.inp-gray, .feed-mail-inp { border: 1px solid #ccc; background-color: #fdfdfd; width: 220px; height: 16px; padding: 4px; color: #444; margin-right: 6px }

.dform { padding: 80px 60px 40px; text-align: center; }

.dform .ipt_error { background-color: #FFFFCC; border-color: #FFCC66 }

.dform-tip { display: none; background-color: #080; color: #fff; line-height: 42px; margin-top: 10px; display:;

font-size: 14px; }

.dform-tip-errer { background-color: #CF301A; }

.dform-tip a { display: inline-block; padding: 0 20px; margin-left: 10px; background-color: #FFE924; color: #CF301A; }

.dform-login { padding: 0; height: 270px; overflow: hidden; }

.dform-login iframe { height: 470px; margin-top: -180px; }

.theme-signin { margin: -50px -20px -50px 90px; text-align: left; font-size: 14px; }

.theme-signin h4 { color: #999; font-weight: 100; margin-bottom: 20px; font-size: 12px; }

.theme-signin li { padding-left: 80px; margin-bottom: 15px; }

.theme-signin li strong { float: left; margin-left: -80px; width: 80px; text-align: right; line-height: 32px; }

.theme-signin .btn { margin-bottom: 10px; }

.theme-signin p { font-size: 12px; color: #999; }

.theme-desc, .theme-version { padding-top: 0 }

jquery点击之后弹出登录界面输入帐号密码

书写并添加js代码。

script src="js/jquery.min.js">/script>

script>

jQuery(document).ready(function($) {

$('.theme-login').click(function(){

$('.theme-popover-mask').fadeIn(100);

$('.theme-popover').slideDown(200);

})

$('.theme-poptit .close').click(function(){

$('.theme-popover-mask').fadeOut(100);

$('.theme-popover').slideUp(200);

})

/script>

jquery点击之后弹出登录界面输入帐号密码

代码整体结构。

jquery点击之后弹出登录界面输入帐号密码

查看效果。

jquery点击之后弹出登录界面输入帐号密码

6相关内容非法爬取自百度经验

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY

上一篇：如何使用CSS3和jquery控制元素标签旋转下一篇：鼠标移动UI跟随晃动的图标jquery

jquery点击之后弹出登录界面输入帐号密码

工具/原料

方法/步骤

热门文章

标签列表