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选择器时，每次单击链接时，弹出窗口都会关闭。

问题：
我知道我可以绑定到popupbeforeclose，preventDefault但我想知道，当点击弹出窗口中的链接时，是否有一种默认方法可以防止弹出窗口关闭？我已经尝试data-dismissable="false"并设置rel="external"了链接。两者都没有工作。

感谢您的投入！

4

2 回答 2

1

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

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

preventDefault至于什么时候真正，什么时候让事情过去，还需要磨练。

于 2013-06-19T08:31:32.980 回答
0

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

onclick="return !window.open(this.href)"
于 2013-10-11T07:37:59.413 回答