疑似セレクターを使用して、jQuery Mobileポップアップを内部のリンクと組み合わせようとしています。:target
理論上はうまく機能しclick element, hashChanges, change CSS using :target
ますが ( )、クリックまたは (より可能性が高い) hashChange によってもポップアップが閉じられます。
クリックすると反転するポップアップの簡単な例を次に示します。
/* =========================== FLIP popup ========================= */
.ui-popup .card_register {
display:none;
}
#access-popup:target .card_login {
display:none;
}
#access-popup:target .card_register {
display:block;
}
@media screen an
(min-device-pixel-ratio: 0) {
.ui-popup-container {
perspective: 800;
}
#access-popup:target .ui-popup {
transform: rotateY(180deg);
}
.ui-popup {
transition: transform 0.6s ease-in-out;
transform-style: preserve-3d;
}
.card_login, .card_register {
backface-visibility: hidden;
}
.card_register {
position: relative;
transform: rotateY(180deg);
}
#access-popup:target .card_register,
#access-popup:target .card_login {
display:block;
}
}
.ui-popup-container {
max-height: 400px;
}
.ui-popup {
position: relative;
background: white;
}
.card_login, .card_register {
box-sizing: border-box;
}
.card_login {
height: 400px;
}
.card_register {
bottom: 400px;
float: left;
}
そしてHTML:
<a href="#access" data-transition="pop" data-rel="popup">Open</a>
<div data-role="popup" id="access">
<div class="card_login">
<a href="#access-popup" rel="external">Register</a>
</div>
<div class="card_register">
<a href="#&ui-state=dialog" rel="external">Login</a>
</div>
</div>
フリップ トランジションとフォールバックは問題なく機能:hover
しますが、セレクターを使用しようとすると:target
、リンクをクリックするたびにポップアップが閉じます。
質問:
バインドできることはわかっていますが、ポップアップ内のリンクがクリックさpopupbeforeclose
れpreventDefault
たときにポップアップが閉じないようにするデフォルトの方法があるかどうかを知りたいですか? リンク先data-dismissable="false"
で設定してみました。rel="external"
どちらも機能しませんでした。
入力していただきありがとうございます!