Is there a way to view the contents of a predefined function like alert()?

Question

I want to make a custom alert, but I read that the alert cannot be customized, so I want to make a new function I can edit.

This is for a html webpage I am making. I have searched Stack Overflow and Google for the answer.

alert("This is a normal alert.");
function specialAlert() {
//How do I get this?
}

I expected the alert() to be editable, but it isn’t.

Will give you a run down on what you need to do to create the custom alert. If you are wanting to make a custom alert, first create it in html and css and use css to position it on the page where you want it. add a class called something like displayNone to the html element, and the style for that class will be display: none; Use javascript to remove this class when there is a click event and it will display your alert. Use keyframes to add a nice animation to it. — Spangle, May 14 '19 at 03:26

score 3 · Answer 1 · answered May 14 '19 at 03:22

It's not possible. The function is composed of native code:

console.log(window.alert.toString());

From an answer on a similar topic:

[Native code] means that it's not an ordinary Javascript function. Functions composed of native code are always functions provided by the browser (or whatever environment the code is running in); they often cannot be emulated by any Javascript functions you write yourself. For example, only the window.history object can perform history actions like history.back(); if window.history gets overwritten, and you don't have a saved reference to it or any other history objects, there's no way to write your own function that can do history.back(), because .back() invokes privileged native code that requires an interface between the visible Javascript and the browser engine.

Many functions made from native code are not implementable in plain Javascript, including alert, because it uses privileged browser-provided functions. Unless all you want to do is alter the text that gets displayed in the alert box (or if the alert appears at all), perhaps by monkeypatching window.alert, no further customization is possible.

That said, it's good to avoid alert anyway in most cases, because it's pretty user-unfriendly. Better to construct a proper modal that doesn't block.

Spangle · Answer 2 · 2019-05-22T10:27:32.883

Lucky for you, I created a quick alert example for you :P

Have a bit of a look at the code and you will get the idea. Things to take away are 1. how to use position: absolute 2. how to add and remove a class from an html element and 3. click events. Enjoy

const alertButton = document.querySelector('.showAlert');
const customAlert = document.querySelector('.alert');
const closeAlert = document.querySelector('.closeAlert');
var tof = false;
alertButton.addEventListener("click", function(event) {
  if(!tof) {
    customAlert.classList.remove("displayNone");
    tof = !tof;
  } else {
    customAlert.classList.add("displayNone");
    tof = !tof;
  }
});

closeAlert.addEventListener("click", function(event) {
  tof = false;
  customAlert.classList.add("displayNone");
});

.alert{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 150px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(50, 166, 243);
  color: white;
}

.alertContent {
  margin-right: auto;
  margin-left: 30px;
}
.closeAlert {
  margin-right: 30px;
}
.closeAlert:hover {
  cursor: pointer;
}

.displayNone {
  display: none;
}

<div class="alert displayNone">
  <div class="alertContent"> This is an alert which is cool</div>
  <div class="closeAlert">X</div>
</div>

<button class="showAlert">Show Alert</button>

code pen here: https://codepen.io/mitchell-boland/pen/arBNBw

score 0 · Answer 3 · answered May 14 '19 at 05:07

I'm guessing that you are looking for a better styling of the generic-looking pop-up alert window.

With this, I recommend trying SweetAlert.

According to the doc, it is a beautiful, responsive and customizable replacement for the default pop-up boxes of browsers.

Click on the link and play with the demo.

score -1 · Answer 4 · answered May 14 '19 at 03:19

-1

How about using bootstrap modal to display the message instead? Check it here

answered May 14 '19 at 03:19

Michael

11
3

Is there a way to view the contents of a predefined function like alert()?

4 Answers4