0

このガイドに従って折りたたみポップアップを作成し、次のスクリプトを追加して、他の場所をクリックすると閉じるようにしました。

javascriptなしのjsfiddleの例

javascriptを使用したjsfiddleの例

$(document).ready( function(){

    $('#linkie').click( function(event){

        event.stopPropagation();

        $('.box').toggle();

    });

    $(document).click( function(){

        $('.box').hide();

    });

});

ただし、ポップアップをトリガーするときに、スクリプトがないと元のように反応しません。場合によっては、トリガーに 2 ～ 3 回のクリックが必要になることがあるので、Css を微調整して応答性を高める必要があるのではないかと考えています。どんな助けでも大歓迎です。

CSS:

     label {
     position: relative;
     cursor: pointer;
     }

.box {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 100;

    /* Prevent some white flashing in Safari 5.1 */
    -webkit-backface-visibility: hidden;

    background-color: #eeeeee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #999999); 
    background-image:    -moz-linear-gradient(top, #eeeeee, #999999); 
    background-image:     -ms-linear-gradient(top, #eeeeee, #999999); 
    background-image:      -o-linear-gradient(top, #eeeeee, #999999); 

    -moz-border-radius:    20px; 
    -webkit-border-radius: 20px; 
    border-radius:         20px; 

    -moz-background-clip:    padding; 
    -webkit-background-clip: padding-box; 
    background-clip:         padding-box; 

    width: 260px; 
    padding: 20px;
    margin: 24px 0;
    opacity: 0;

    -webkit-transform: scale(0) skew(50deg);
    -moz-transform:    scale(0) skew(50deg);
    -ms-transform:     scale(0) skew(50deg);
    -o-transform:      scale(0) skew(50deg);

    -webkit-transform-origin: 0px -30px;
    -moz-transform-origin:    0px -30px;
    -ms-transform-origin:     0px -30px;
    -o-transform-origin:      0px -30px;

    -webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
    -moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
    -ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
    -o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
}

        .box:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 30px;
    border-bottom: 20px solid #eee;
    border-left:   14px solid transparent;
    border-right:  14px solid transparent;
    width:  0;
    height: 0;
}

        .popUpControl:checked ~ label > .box {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg);
    -moz-transform:    scale(1) skew(0deg);
    -ms-transform:     scale(1) skew(0deg);
    -o-transform:      scale(1) skew(0deg);
}
        .popUpControl { 
        display: none; 
}

        .button {
    background: blue;
    color: white;
    padding: 5px;
    border-radius: 5px;
}               

/* For link example */
.link { color: blue; text-decoration: underline; }
.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
    .copy { color: black; text-decoration: none;  }
4

2 に答える 2

1

最初のものを使用して、切り替えを行う JavaScript を追加しないでください。何かのようなもの

$(document).on("click", function(e) {
    var elem = $(e.target);
    if(elem.hasClass("link")) {  
        return;
    }
    $(".popUpControl:checked").next("label").click();
});

例: http://jsfiddle.net/wP3vD/

上記のコードは、複数ある場合、他の要素を閉じません。これは修正できます。終了する代わりに、一致したセットからラベルを除外できます。

$(document).on("mousedown", function (e) {
    var elem = $(e.target);
    labelsToClick = $(".popUpControl:checked").next("label").filter(function (i) {
        return !$(this).find(elem).length;
    }).click();
});

例: http://jsfiddle.net/wP3vD/1/

于 2013-09-03T17:19:13.707 に答える
0

トグルと非表示のメソッドにタイマーを設定しようとしましたか (つまり、.toggle(300) または .hide(300))

于 2013-09-03T17:16:15.750 に答える