如何让我的弹出窗口有保证金？

时间：2013-02-09 04:48:11

标签： jquery css

我尝试在我的CSS中添加保证金，但它没有用。您可以在此处查看工作示例： 的CSS：

* {
 margin: 0;
 padding: 0;
}
body { background: #ededed url(../images/bg.gif) repeat-x; }
p {
 color: #999;
 padding: 0;
 margin: 10px 0;
 font: 12px/18px Arial, Helvetica, sans-serif;
}
#container {
 margin: auto;
 width: 950px;
}
#header {
 height: 302px;c
 width: 950px;
 float: left;
 background: url(../images/header.gif) no-repeat;
}
#logo { margin-top: 60px; }
#logo h1 {
 display: block;
 float: left;
 width: 503px;
 height: 57px;
 text-indent: -9999px;
}
#logo h1 a {
 display: block;
 width: 100%;
 height: 100%;
 outline: none;
 background: url(../images/logo.png) no-repeat 0 0;
}
#navigation {
 height: 38px;
 width: 950px;
 margin-top: 152px;
 float: left;
}
.nav-links li {
 display: inline;
 padding: 3px 25px 0 0;
 float: left;
}
.nav-links li a {
 text-transform: capitalize;
 color: #fff;
 text-decoration: none;
 letter-spacing: -1px;
 font: bold 14px Arial, Helvetica, sans-serif;
}
.nav-links li a:hover { color: #ff0; }
.phone-number li {
 float: right;
 list-style-type: none;
 text-transform: capitalize;
 color: #fff;
 letter-spacing: -1px;
 padding-top: 3px;
 font: normal 14px Arial, Helvetica, sans-serif;
}
#left-content {
 float: left;
 width: 566px;
 margin-top: 20px;
}
.content-top {
 float: left;
 height: 32px;
 width: 536px;
 background: url(../images/content_box_top.png) no-repeat;
 padding: 4px 15px;
}
.content-middle {
 float: left;
 width: 534px;
 padding: 5px 15px 0 15px;
 border-right: 1px solid #d3d3d3;
 border-left: 1px solid #d3d3d3;
 background: #fff;
}
h2 {
 text-transform: capitalize;
 color: #666;
 letter-spacing: -1px;
 padding-top: 7px;
 font: bold 16px Arial, Helvetica, sans-serif;
}
.content-middle p { text-align: justify; }
.highlight {
 color: #7b9122;
 font-style: italic;
}
.content-bottom {
 float: left;
 height: 17px;
 width: 566px;
 margin-bottom: 15px;
 background: url(../images/content_box_bottom.png) no-repeat;
}
#content-right {
 float: right;
 width: 322px;
 margin-top: 20px;
}
.sidebar-top {
 float: left;
 height: 32px;
 width: 292px;
 background: url(../images/sidebar_top.png) no-repeat;
 padding: 4px 15px;
}
.sidebar-middle {
 float: left;
 width: 290px;
 padding: 5px 15px 0 15px;
 border-right: 1px solid #d3d3d3;
 border-left: 1px solid #d3d3d3;
 background: #fff;
}
.sidebar-middle p { text-align: justify; }
.sidebar-bottom {
 float: left;
 height: 16px;
 width: 322px;
 margin-bottom: 15px;
 background: url(../images/sidebar_bottom.png) no-repeat;
}
#footer {
 clear: both;
 height: 111px;
 background: url(../images/footer.gif) repeat-x bottom;
}
#footer-content {
 height: 91px;
 width: 950px;
 padding-top: 20px;
 margin: auto;
}
#footer-content p {
 color: #fff;
 text-align: center;
 padding-top: 35px;
}

.spanbuttons{text-align: center;
}

.login{width:25%;}
.register{width:25%;}
.sign-in {
width:100%;}

.log-out {
width:100%;}

.button {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
    background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
    background-color:#89c403;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    border-radius:9px;
    border:1px solid #74b807;
    display:inline-block;
    color:#ffffff;
    font-family:Verdana;
    font-size:14px;
    font-weight:bold;
    padding:6px 30px;
    text-decoration:none;
    text-shadow:0px 1px 0px #528009;
}.button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403) );
    background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
    background-color:#77a809;
}.button:active {
    position:relative;
    top:1px;
}


/* This is the login box */
a.forgot {
text-decoration: none;
color: #FFFFFF;
}
.btn-sign {
    width:460px;
    margin-bottom:20px;
    margin:0 auto;
    padding:20px;
    border-radius:5px;
    background: -moz-linear-gradient(center top, #00c6ff, #018eb6);
    background: -webkit-gradient(linear, left top, left bottom, from(#00c6ff), to(#018eb6));
    background:  -o-linear-gradient(top, #00c6ff, #018eb6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00c6ff', EndColorStr='#018eb6');
    text-align:center;
    font-size:36px;
    color:#fff;
    text-transform:uppercase;
}

.btn-sign a { color:#fff; text-shadow:0 1px 2px #161616; }

#mask {
    display: none;
    background: #000; 
    position: fixed; left: 0; top: 0; 
    z-index: 10;
    width: 100%; height: 100%;
    opacity: 0.8;
    z-index: 999;
}

.login-popup{
    display:none;
    background: #333;
    padding: 10px; 
    margin:15px;
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999;
    -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari, Chrome */
    text-align: left;
}

img.btn_close {
top:5px;
    float: right; 
    margin: -28px -28px 0 0;
}

fieldset { 
    border:none; 
}

form.signin .textbox label { 
    display:block; 
    padding-bottom:7px; 
}

form.signin .textbox span { 
    display:block;
}

form.signin p, form.signin span { 
    color:#FFFFFF; 
    font-size:11px; 
    line-height:18px;
} 

form.signin .textbox input { 
    background:#666666; 
    border-bottom:1px solid #333;
    border-left:1px solid #000;
    border-right:1px solid #333;
    border-top:1px solid #000;
    color:#fff; 
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font:13px Arial, Helvetica, sans-serif;
    padding:6px 6px 4px;
    width:200px;
}

form.signin input:-moz-placeholder { color:#FFFFFF; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#FFFFFF; text-shadow:0 0 2px #000;  }

#loader {display:none;
width: 200px;}

.autoscroll{overflow:auto;}

jQuery的：

$(document).ready(function() {
    $('#loginbox').click(function() {

        // Getting the variable's value from a link 
        var loginBox = $(this).attr('href');

        //Fade in the Popup and add close button
        $(loginBox).fadeIn(300);

        //Set the center alignment padding + border
        var popMargTop = ($(loginBox).height() + 24) / 2; 
        var popMargLeft = ($(loginBox).width() + 24) / 2; 

        $(loginBox).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);

        return false;
    });

    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').live('click', function() { 
      $('#mask , .login-popup').fadeOut(300 , function() {
        $('#mask').remove();  
    }); 
    return false;
    });

    $("#password").keydown(function(event){
    if(event.keyCode == 13) {
        $('#loginbtn').click();
    };
});


    $("#loginbtn").click(function() {
    var empty = $(this).parent().find("input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        var notification = noty({text: "Error: Some fields were not filled out" , type:"error",  timeout: 2500, layout:"topCenter"});
        return false;
    }
    $("#loader").show();
    $("#loginbtn").hide();
 var username = $('#username').val(),
 password = $('#password').val();
$.ajax({
    url: "components/login.php",
    data:{username:username, password:password},
    type: "post",
    success: function(data) {
                    if(data == 'success') {
                        var notification = noty({text: "Welcome, "+username+"!" , type:"success",  timeout: 2500, layout:"topCenter"});
                        $("#loader").hide();
                        $("#loginbtn").show();
                        setTimeout(function(){
                         window.location = document.URL;
                    }, 3000);}
                    else {
                    var notification = noty({text: "Error: Incorrect Username/Password" , type:"error",  timeout: 2500, layout:"topCenter"});
                    $("#loader").hide();
                    $("#loginbtn").show();
                    }
    },
    error: function(html) {
    alert('error');
},
    statusCode: {
     404: function() {
       //404 here
     }
    }
});
return false;
});

    $('#registerbox').click(function() {

        // Getting the variable's value from a link 
        var registerBox = $(this).attr('href');

        //Fade in the Popup and add close button
        $(registerBox).fadeIn(300);

        //Set the center alignment padding + border
        var popMargTop = ($(registerBox).height() + 24) / 2; 
        var popMargLeft = ($(registerBox).width() + 24) / 2; 

        $(registerBox).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);

        return false;
    });

$("#.log-out.button").click(function() {
$.ajax({
    url: "components/logout.php",
    success: function(data) {
                        var notification = noty({text: "Successfully logged out!" , type:"success",  timeout: 2500, layout:"topCenter"});
                        setTimeout(function(){
                         window.location = document.URL;
                    }, 3000);
    },
    error: function(html) {
    alert('error');
},
    statusCode: {
     404: function() {
       //404 here
     }
    }

});
return false;
});
});

HTML：

<div class="sidebar-top">
      <h2>Log in Here:</h2>
    </div>
    <span class="spanbuttons">
    <div class="sidebar-middle">
    <a id="loginbox" href="#login-box" class="login button">Login</a> <a id="registerbox" href="#register-box" class="register button">Register</a>
<div id="login-box" class="login-popup">
        <a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
          <span class=autoscroll><form id="formlogin" method="post" class="signin" action="#">
                <fieldset class="textbox">
                <label class="username">
                <span>Username</span>
                <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
                </label>
                <label class="password">
                <span>Password</span>
                <input id="password" name="password" value="" type="password" placeholder="Password">
                </label>
                <button id="loginbtn" class="sign-in button" type="button">Sign in</button>
                <div id="loader"><img src="images/loader.gif" alt="loading…"></div>
                <p>
                <a class="forgot" href="#">Forgot your password?</a>
                </p>        
                </fieldset>
          </form>
</div>
<div id="register-box" class="login-popup">
        <a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
          <form method="post" class="signin" action="#">
                <fieldset class="textbox">
                <label class="firstname">
                <span>First Name</span>
                <input id="firstname" name="firstname" value="" type="text" autocomplete="off" placeholder="First Name">
                </label>
                <label class="lastname">
                <span>Last Name</span>
                <input id="lastname" name="lastname" value="" type="text" autocomplete="off" placeholder="Last Name">
                </label>
                <label class="username">
                <span>Username</span>
                <input id="username" name="username" value="" type="text" autocomplete="off" placeholder="Username">
                </label>
                <label class="email">
                <span>Email Address</span>
                <input id="email" name="email" value="" type="text" autocomplete="on" placeholder="Email Address">
                </label>
                <label class="password">
                <span>Password</span>
                <input id="password" name="password" value="" type="password" placeholder="Password">
                </label>
                <label class="password">
                <span>Repeat Password</span>
                <input id="password2" name="password2" value="" type="password" placeholder="Repeat Password">
                </label>
                <button id="registerbtn" class="sign-in button" type="button">Register</button>
                </fieldset>
          </form></span>
</div>
    </div></span>
    <div class="sidebar-bottom">
    </div>

演示：http://alex.piechowski.org/school/home

我需要设置浏览器窗口小得多的边距。

0 个答案:

没有答案
相关问题
最新问题