0

www.buckwilson.me/lightboxmeプラグインを使用しています...コードを適用してポップが完全に機能した後ですが、問題はログインボタンのデフォルト値を変更できないことです

私のディスプレイ

ここに画像の説明を入力してください

必要な表示（このサンプルはmsペイントを使用して編集）

ここに画像の説明を入力してください

完全なコード

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.lightbox_me.js" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

    $(document).ready(function() {

         $(function() {

                $('#try-1').click(function(e) {
                    $("#sign_up").lightbox_me({centered: true,closeClick:false, onLoad: function() {
                        $("#sign_up").find("input:first").focus();
                    }});

                    e.preventDefault();
                });

            });

    });

</script>

<link rel="stylesheet" href="popup.css" type="text/css" media="screen" title="no title" charset="utf-8">


<div id="sign_up" style="display: none; left: 50%; margin-left: -223px; z-index: 1002; position: fixed; top: 50%; margin-top: -159px;"> <br/>
  <div class="announcement">Important Announcement!!!</div>
  <div id="home_sign_up_form"> To keep updating! Like our Fabebook page ,Follow us on Twitter, Google+ or Subscribe RSS Feed.<br/><br/>



            <div style="float:left; margin-left:20px;">

                  <div id="actions">
                    <a id="log_in" class="close form_button sprited" href="#">Close</a>
                  </div>
            </div>

    </div>

  <a id="close_x" class="close sprited" href="#" title="Close">Close</a> </div>

<input type="button" value="Add Item" id="try-1" onClick="" />

CSSコード

* {
    margin: 0;
    padding: 0;
    font-size: 1em;
    text-decoration: none;
    /*border: none;*/
    /*list-style: none;*/
    outline: none;
}
.sprited {
    background: url('download_sprite.png') no-repeat;
    line-height: 1000px;
    overflow: hidden;
    display: block;
}
.try {
    width: 93px;
    height: 31px;
    background-position: -30px -156px;
}
.try:hover {
    background-position: -30px -187px;
}
.try:active {
    background-position: -30px -218px;
}
h2 {
    margin-top: 50px;
}
#sign_up {
    -moz-border-radius: 6px;
    background: #eef2f7;
    -webkit-border-radius: 6px;
    border: 1px solid #536376;
    -webkit-box-shadow: rgba(0, 0, 0, .6) 0px 2px 12px;
    -moz-box-shadow:  rgba(0, 0, 0, .6) 0px 2px 12px;
    ;
    padding: 14px 22px;
    width: 400px;
    position: relative;
    display: none;
    font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #536376;
}
#sign_up a {
    color: #067dd7;
}
#sign_up a:hover {
    text-decoration: underline;
}
#sign_up #sign_up_form {
    margin-top: 13px;
}
#sign_up label {
    display: block;
    margin-bottom: 10px;
    color: #536376;
    font-size: .9em;
}
#sign_up label input {
    display: block;
    width: 393px;
    height: 31px;
    background-position: -201px 0;
    padding: 2px 8px;
    font-size: 1.2em;
    line-height: 31px;
    border: none;
}
#see_id {
    width: 228px;
    height: 23px;
    background-position: -202px -133px;
}
#left_out {
    background-position: -202px -158px;
    width: 113px;
    height: 16px;
}
#sign_up_form {
    position: relative;
    background: url('divider.png') repeat-x bottom left;
    padding-bottom: 54px;
    margin-bottom: 12px;
}
#actions {
    float: left;
    position: absolute;
    right: 0;
    height: 31px;
    bottom: 20px;
}
a.form_button {
    float: left;
    width: 93px;
    height: 31px;
    margin-right: 15px;
}
#cancel {
    background-position: -198px -36px;
}
#log_in {
    background-position: -291px -36px;
}
#cancel:hover {
    background-position: -198px -67px;
}
#cancel:active {
    background-position: -198px -98px;
}
#log_in:hover {
    background-position: -291px -67px;
}
#log_in:active {
    background-position: -291px -98px;
}
#close_x {
    width: 24px;
    height: 23px;
    overflow: hidden;
    line-height: 1000px;
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    background-position: -387px -102px;
}
#usage {
    background-position: -323px -172px;
    width: 67px;
    height: 22px;
}

.log_in_button {
    float: left;
    width: 93px;
    height: 31px;
    margin-right: 15px;
    border:none;
    cursor: pointer;
}

.announcement{
    height:30px;    
    font-weight:bold;
    font-size:16px;
}

#home_sign_up_form {
    margin-top: 13px;
    position: relative; 
    padding-bottom: 54px;
    margin-bottom: 12px;
}
4

1 に答える 1

0

そのためには、ボタンのスタイルを設定する必要があります。以下を試しbutton_exampleて、ボタンにクラスを追加してください

.button_example{
border:1px solid #7d99ca; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #a5b8da;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5b8da), color-stop(100%, #7089b3));
 background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
 background-image: linear-gradient(top, #a5b8da, #7089b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a5b8da, endColorstr=#7089b3);
}

.button_example:hover{
 border:1px solid #5d7fbc; background-color: #819bcb;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#819bcb), color-stop(100%, #536f9d));
 background-image: -webkit-linear-gradient(top, #819bcb, #536f9d);
 background-image: -moz-linear-gradient(top, #819bcb, #536f9d);
 background-image: -ms-linear-gradient(top, #819bcb, #536f9d);
 background-image: -o-linear-gradient(top, #819bcb, #536f9d);
 background-image: linear-gradient(top, #819bcb, #536f9d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#819bcb, endColorstr=#536f9d);
}

jsfiddleはあなたに合わせて色を編集するだけです

于 2012-12-22T14:37:39.323 に答える