How to open popup, onclick of link in Vuejs?

Question

 <label class="label-set">
 <input type="checkbox" class="" name="sameadr" />
  I agree to all statements of
  <a href="#" style="color: #ee1d24"> Terms of Use </a>
  </label>

How to open popup, onclick of link. simple popup should open as soon as user click on link

window.location = url; or window.open(url);

Aalexander
– Aalexander

2021-02-20 12:18:00 +00:00
Commented Feb 20, 2021 at 12:18 — Aalexander
– Aalexander, Commented Feb 20, 2021 at 12:18

Oleksii · Accepted Answer · 2021-02-20 19:07:24Z

1

In html give a id to your a tag.

    <label class="label-set" id="mainId">
     <input type="checkbox" class="" name="sameadr" />
      I agree to all statements of
      <a href="#" id="newId" style="color: #ee1d24"> Terms of Use </a>
    </label>

In javascript

    document.getElementById("newId").addEventListener("click", function(){
       confirm("confirm this") // or your popop code
    })

Try this for vue.js

<a href="javascript:void(0)" v-on:click="openPopup" id="newId" style="color: #ee1d24"> Terms of Use </a>

And write this inside your method

    new Vue({
      el: '#mainId',
      methods: {
        openPopup: function () {
          alert('ok')
        }
      }
    })

Try this

edited Feb 20, 2021 at 19:07

Oleksii

2,7593 gold badges10 silver badges22 bronze badges

answered Feb 20, 2021 at 12:27

Mukti Prasad Behera

2651 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T dhanunjay Over a year ago

Thanks for info, in vuejs how to do the same

Mukti Prasad Behera Over a year ago

I have not tested. but write a small code for you. check it: [previous code edited]

omerS · Accepted Answer · 2021-02-20 12:56:42Z

1

Make a modal component. Add a click to your a tag. When clicked show your modal component. After another action (confirm etc.) close and continue.

How to make a reusable modal component in Vue.js: How to make a Modal Component

answered Feb 20, 2021 at 12:56

omerS

8842 gold badges11 silver badges22 bronze badges

1 Comment

quilkin Over a year ago

The link given here is perfect - very detailed instructions, And it works!

Collectives™ on Stack Overflow

How to open popup, onclick of link in Vuejs?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related