将 CSS 模式定位为在没有 href 的情况下打开

Question

我使用 CSS 和 href 创建了这个模态弹出窗口，以定位在单击时打开的模态。这似乎在演示中有效，但是一旦我尝试在我的应用程序上使用，每次我单击模态打开时，它都会使用模态 ID 更改 URL 并刷新页面，这不应该发生。

<div ng-controller="demoCtrl">
  <a href="#openModal">Open Modal</a>
  <div id="openModal" class="modalDialog">
    <a class="fullSizeBlock" href="#close"></a>
    <div class="content">
      <a href="#close">X</a>
      <h1>Modal Box</h1>
      <button ng-click="changeState()">Show Client</button>
      <div ng-if="client.state">{{client.name}}</div>
    </div>
  </div>
</div>

#openModal进入 URL 和页面自动刷新。我怎样才能避免这种情况？

普伦克

Answer 1

您可以使用

preventDefault()函数。我将open-modal-anchor用作演示目的的类。

$('.open-modal-anchor').click(function (e) {
    e.preventDefault();
});