Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

How do I stop a Javascript "Confirm" box appearing at the top of the page?

I have an HTML page on which I'm practicing Javascript, and it has two very simple pieces of script, then another that has a "Confirm" box (an "Alert" with "OK" and "Cancel" buttons in it).

But when I open the page, the Alert appears at the top of the page.

I've tried using DIVs and paragraphs to hold it but it still appears at the top.

What's the simplest (and correct) way to make it appear below the previous "document.write" sections?

Update:

That was in Chrome... in IE it's down the page, but overwriting the other text. I want to add some HTML text to describe it

1 Answer

Relevance
  • Chris
    Lv 7
    7 years ago
    Favorite Answer

    When you use alert(), confirm() or prompt(), you're leaving HTML territory. The box is styled and displayed by the browser itself, always appears on top of your page, blocks interaction with the page, and you can't change or move it. Google decided to have them show up at the top in Chrome, while Firefox and IE still show them at the window's center.

    If you want your own popup, you have to create an absolutely positioned <div> and show it when required. You will need to put the text field and button on it yourself. The tags are <input> and <button>.

    The basic idea is to use

    display: none

    in the popup's style rules, then change that to "block" to show it:

    <div id="popup">The popup</div>

    JS:

    var showPopup = function() {

    var popup = document.querySelector("#popup");

    popup.style.display = "block";

    };

Still have questions? Get your answers by asking now.