1

疑似セレクターを使用して、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、リンクをクリックするたびにポップアップが閉じます。

質問:
バインドできることはわかっていますが、ポップアップ内のリンクがクリックさpopupbeforeclosepreventDefaultたときにポップアップが閉じないようにするデフォルトの方法があるかどうかを知りたいですか? リンク先data-dismissable="false"で設定してみました。rel="external"どちらも機能しませんでした。

入力していただきありがとうございます!

4

2 に答える 2