将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进入网址并自动刷新页面。我怎么能避免这个？

Plunker

Answer 1

您可以使用preventDefault()功能。我将open-modal-anchor用作演示目的的课程。

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