js常用插件

最新推荐文章于 2024-07-12 09:54:00 发布

霸气工作室

最新推荐文章于 2024-07-12 09:54:00 发布

阅读量802

点赞数

分类专栏： 2017年之前

本文链接：https://blog.csdn.net/QIU1988YANG/article/details/54692198

版权

2017年之前专栏收录该内容

87 篇文章 0 订阅

订阅专栏

点击弹出很好用

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery实现点击弹出框登陆界面代码_按钮代码_www.93diy.com素材模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description" content="jQuery实现点击弹出框登陆界面代码输入用户名密码后提示用户名密码错误重新输入_按钮代码_JS代码_www.93diy.com素材模板" />
<meta name="Keywords" content="jQuery,点击,弹出,登陆界面,代码,输入,用户名,密码后,错误,重新输入,按钮代码,JS代码,JS,JS特效,登陆框" />
</head>
<body>
<style type="text/css">
body {
 margin: 0px;padding:0
}
#div1 {
 display: none;
 position: absolute;
 z-index: 9999999;
 height: 100%;
 width: 100%;
 background: #000000;
 filter:Alpha(opacity=30);
}
#div2 {
 display: none;
 position: absolute;
 height: 100%;
 width: 100%;
 padding-top: 15%;
 z-index: 9999999;
 left: 0px;
 top: 0px;
 
}
.user_t{ font-size:14px; text-indent:15px; line-height:40px; border-bottom:1px solid #dddddd;}
.user_close{ padding-right:10px; border-bottom:1px solid #dddddd;}
.user_n{ font-size:14px;  line-height:28px; color:#b8b8b8;}
</style>
<script>
function openme(){
document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='block';
}
function closeme(){
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
}
function logo_in(){
alert('The username or password you entered is incorrect')
//验证
//转向...
//myform.action=""
//myform.submit()
closeme();
}
</script>
<div id="div1"></div>
<div id="div2">
<table width=400 border="0" cellpadding="3" cellspacing="1" style="background: #f2f2f2; border:1px solid #dddddd; position:static;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true)" align="center">
  <tr id="m_tr">
    <td class="user_t">User Login</font></td>
    <td class="user_close" align="right">
 <input type="button" value="ｘ" onClick="closeme()" style="cursor: hand;">
 </td>
  </tr>
  <tr>
<form name="myform"  method="post"  >
    <td colspan="2" width="100%" bgcolor="#FFFFFF" height="170" class="user_n" valign="middle"><table width="100%" border="0" cellpadding="10" cellspacing="10">
  <tr>
    <td align="right" width="100">username:</td> <td><input name="username" type="text" maxlength="20" style="width:200px; height:20px;"></td>
    </tr><tr>
    <td align="right">password:</td> <td><input name="pasword" type="password" size="0" maxlength="20" style="width:200px; height:20px;"></td>
  </tr>
</table>

<input type="button" name="logoin" value="Sign In" onClick="logo_in()" style="width:100px; margin-left:35px; margin-top:10px; height:30px; line-height:25px;"> 
         <input type="button" name="exit" value="Cancel" onClick="closeme()" style="width:100px; height:30px; margin-top:10px; line-height:25px;">
 </td>
</form>
  </tr>
</table>
</div>

<center>
<input name="button" type="button" onClick="openme()" value="登陆" />
</center>
<br><br />

<div style="text-align:center;margin:50px 0">

<p>查找更多代码，请访问：<a href="http://www.93diy.com">www.93diy.com</a></p>

<p></p><script type="text/javascript">
/*960*90，创建于2013-7-27*/
var cpro_id = "u1328248";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
</div>
</body>
</html>

View Code

选项卡

<script type="text/javascript">
function setTab(name,cursel){
    cursel_0=cursel;
    for(var i=1; i<=links_len; i++){
        var menu = document.getElementById(name+i);
        var menudiv = document.getElementById("con_"+name+"_"+i);
        if(i==cursel){
            menu.className="off";
            menudiv.style.display="block";
        }
        else{
            menu.className="";
            menudiv.style.display="none";
        }
    }
}
function Next(){                                                        
    cursel_0++;
    if (cursel_0>links_len)cursel_0=1
    setTab(name_0,cursel_0);
} 
var name_0='one';
var cursel_0=1;
//var ScrollTime=3000;//循环周期（毫秒）
var links_len,iIntervalId;
onload=function(){
    var links = document.getElementById("tab1").getElementsByTagName('dt')
    links_len=links.length;
    for(var i=0; i<links_len; i++){
        links[i].onmouseover=function(){
            clearInterval(iIntervalId);
            this.οnmοuseοut=function(){
                iIntervalId = setInterval(Next,ScrollTime);;
            }
        }
    }
    document.getElementById("con_"+name_0+"_"+links_len).parentNode.οnmοuseοver=function(){
        clearInterval(iIntervalId);
        this.οnmοuseοut=function(){
            iIntervalId = setInterval(Next,ScrollTime);;
        }
    }
    setTab(name_0,cursel_0);
    iIntervalId = setInterval(Next,ScrollTime);
}
</script>
<style type="text/css">
*{list-style:none;margin:0;padding:0;overflow:hidden}
.menu{background:#eee; width:100%; height:50px; border-bottom:#A8C29F solid 1px;}
dt{ float:left; width:33.5%;text-align:center;line-height:50px;height:50px;font-size:14px; color:#666666; }
.menudiv{border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe; }
.menudiv div{padding:15px;line-height:28px;}
.off{background:#E0E2EB;color:#336699;font-weight:bold; padding-left:0px;}
</style>
<div class="tab1" id="tab1">
    <div class="menu">
        <dl>
            <dt id="one1" onClick="setTab('one',1)">店铺简介</li>
            <dt id="one2" onClick="setTab('one',2)">商品简介</li>
            <dt id="one3" onClick="setTab('one',3)">会员评论</li>
        </dl>
    </div>
    <div class="menudiv">
    <div id="con_one_1">商家电话：1863153013<br>商家地址：中天西城纪</div>
    <div id="con_one_2" style="display:none;"><h4 style="color:red">商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介</h4></div>
    <div id="con_one_3" style="display:none;"><h4 style="color:red">商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论商品评论</h4></div>
    </div>
</div>

View Code

点击弹出层

http://www.lanrenzhijia.com

anrenzhijia.css

/* �������������֮�� www.lanrenzhijia.com */
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
}/* �������������֮�� www.lanrenzhijia.com */
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;
    -webkit-appearance:button
}
input[type="search"] {
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
input[type="search"]::-webkit-search-decoration {
-webkit-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;
}
/*window*/


/* input */
.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 */
.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: -webkit-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:-webkit-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: -webkit-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: -webkit-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
}
/* �������������֮�� www.lanrenzhijia.com */
.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
}
/* �������������֮�� www.lanrenzhijia.com */

View Code

index.php

<!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>
<link rel="stylesheet" href="css/lanrenzhijia.css" media="all">
<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>
</head>

<body>
<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="lanrenzhijia" 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>
<div class="theme-popover-mask"></div>
</body>
</html>