Show popup when link clicks

Question

I just want to make a URL with a button when It clicks it must show a dialog with my message. Is there any way to achieve in HTML?. Already searched google, as a beginner I don't understand much. So a simple tutorial might help me.

the link should be like www.google.com/webpage/#popup

dialog must be shown in the center of the screen.

programmer365 · Answer 1 · 2020-11-17T07:19:44.703

1

onClick with a function:

<script type="text/javascript">
function AlertIt() {
  alert("ATTENTION! THIS IS AN ALERT");
}
</script>

<a href="javascript:AlertIt();">click me</a>

Complex single one-liner:

<a href="http://example.com/"
 onclick="return alert('Please click on OK to continue.');">click me</a>

edited Nov 17 '20 at 07:19

answered Nov 17 '20 at 07:16

programmer365

12,641
3
7
28

I just want the link should be like this: www.google.com/popup .. how to make that – Vijay Ram Nov 17 '20 at 07:19
is there any way to convert like www.example.com/#dialog – Vijay Ram Nov 17 '20 at 07:21
Then edit the href attribute according to the second example – programmer365 Nov 17 '20 at 07:21
but this alert should be shown on the top. isn't it? I want to show it to the center of the screen – Vijay Ram Nov 17 '20 at 07:24
Alerts are browser-specific, so when you want a cross-browser-consistent custom alert, you have to use either a library, or use a styled element of your webpage. You can take a look at [SweetAlert](https://sweetalert.js.org/), that might be what you are looking for. – Oskar Grosser Nov 17 '20 at 08:26

Oskar Grosser · Answer 2 · 2020-11-17T08:34:25.307

You can make use of a hashchange-event!
Make a check-hash function and call it initially, so that loading the URL with the hash has the same behavior as changing the hash when already on-page.

You could create an array holding the IDs of the elements that should "listen" for such a hashchange, and give them a specific class (e.g. .hash-selected) when their ID equals the hash.

const hashes = ["#popup"]; // List of IDs that are "listening"
let lastHash = "";
function checkHash() {
  if (hashes.includes(lastHash)) // Remove class from last selected element
    document.querySelector(lastHash).classList.remove("hash-selected");
  if (hashes.includes(location.hash)) // Add class to current selected element
    document.querySelector(location.hash).classList.add("hash-selected");
  
  // Save current hash as 'lastHash' for first if-statement when calling 'checkHash()' again
  lastHash = location.hash;
}

checkHash(); // Initial function-call for same behavior on "page-open"
window.addEventListener("hashchange", () => checkHash());

body {margin: 0}
#popup {
  position: absolute;
  border-bottom: 1px solid black;
  width: 100%;
  transform: translateY(-100%);
  background: lightgreen;
}
#popup.hash-selected {transform: translateY(0)}

<div id="popup">
  <p>Some sample text</p>
  <a href="#">Close</a>
</div>
<a href="#popup">Open popup</a>

We could even easily fill the hashes-array with IDs of elements that have a specific class, like .hash-listen:

const hashes = [];
for (let el of document.querySelectorAll(".hash-listen"))
  hashes.push("#" + el.id);

// ...

Sidenote
To remove hashchanges from the browser-history, you should take a look at this answer that demonstrates the history.replaceState()-function.

score -1 · Answer 3 · answered Nov 17 '20 at 07:23

-1

    <a href="https://stackoverflow.com/" onclick="myAlert()">Click Here</a>

    <script>
        function myAlert() {
            alert('hello there!');
        }
    </script>

answered Nov 17 '20 at 07:23

Asif Ali

9
1

Show popup when link clicks

3 Answers3