1

I created this modal pop up using CSS and href to target the modal to open on click. This seems to work in demos, but once I tried to use on my app, every time I click on the modal to open, it changes the URL with the modal ID and refreshes the page, which shouldn't happen.

<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 goes into the URL and page auto refreshes. How can I avoid this?

Plunker

freginold
  • 3,946
  • 3
  • 13
  • 28
N.Car
  • 492
  • 1
  • 4
  • 14
  • You may looking for javascript.void(0). https://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean – Shridhar Jan 08 '18 at 14:59
  • 1
    Nothing “refreshes” when I open that modal in your plunkr, at least not in my browser. // You should really rather be using JS for this - _accessibility_ of those CSS-only “solutions” is usually rather terrible. JS allows you to toggle the proper ARIA attributes etc. – CBroe Jan 08 '18 at 15:02
  • So get rid of the href approach and use your controller data model to manage the modal state instead. You might consider creating a modal service for this – charlietfl Jan 08 '18 at 15:08
  • @CBroe yes, but its having a different effect on my app. changes the URL according to the div class or id and it reloads the page with that new URL – N.Car Jan 09 '18 at 10:20
  • Well then you should try to create a [mcve] that reproduces the problem. – CBroe Jan 09 '18 at 10:23

1 Answers1

0

You could use the preventDefault() function. I'll use open-modal-anchor as a class for demo purposes.

$('.open-modal-anchor').click(function (e) {
    e.preventDefault();
});
Unknown
  • 769
  • 2
  • 7
  • 17