Question

我正在尝试使用:target伪选择器将jQuery Mobile popup与内部链接结合起来。

它在理论上很有效（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"。两者都不起作用。

感谢您的投入！

Answer 1

更好的答案，这似乎是阻止弹出窗口关闭的“最少侵入性”的JQM方式：

  $(window).on('navigate', function(e, data) {
    e.preventDefault();
  });

仍然需要回顾何时真正preventDefault以及何时让事件通过。

Answer 2

添加像这样的onclick函数对我有用：

onclick="return !window.open(this.href)"

如何在单击链接时阻止jQuery Mobile弹出窗口关闭？

2 个答案: