制作 Javascript 是/否确认框？

Making a Javascript Yes/No Confirmation Box?

提问by Seeker

well Javascript confirmation gives the Ok/Cancel Button but I want to create a Confirmation with Yes and No in Javascript can anyone help ??

好吧，Javascript 确认提供了“确定/取消”按钮，但我想在 Javascript 中使用 Yes 和 No 创建一个确认，任何人都可以帮忙吗？

回答by Buh Buh

The buttons in a confirmation box cannot be changed by Javascript.

Javascript 无法更改确认框中的按钮。

I would suggest rolling your own in the form of an inline popup. Just create a div with position:absolute;in the centre of the page and then show/hide it.

我建议以内联弹出窗口的形式滚动你自己的。只需position:absolute;在页面中心创建一个 div，然后显示/隐藏它。

EDIT:

编辑：

The code below will outline what you need to do in vanilla Javascript. You will probably want to spend more time styling it, but the key points are:

下面的代码将概述您需要在 vanilla Javascript 中执行的操作。你可能想花更多的时间来设计它，但关键点是：

position:absolute;So that the popup will appear in the centre of the page. display:none;So that the popup will be hidden when the page loads. The link has a hrefso that it will still be functional even without Javascript. The onClickattribute of the first link has return false; This stops the link from redirecting.

position:absolute;这样弹出窗口就会出现在页面的中央。 display:none;以便在页面加载时隐藏弹出窗口。该链接有一个，href因此即使没有 Javascript，它仍然可以正常工作。第onClick一个链接的属性已经返回false；这会阻止链接重定向。

You can change the two onClicks inside the popup to do whatever else you want them to.

您可以更改onClick弹出窗口中的两个s 以执行您希望它们执行的任何其他操作。

<style type="text/css">

div#popup
{
    position:absolute;
    display:none;
    top:200px;
    left:50%;
    width:500px; 
    margin-left:-250px;
    border:1px solid blue; 
    padding:20px;
    background-color:white;
}

</style>

<a 
    href="http://example.com/" 
    onclick="document.getElementById('popup').style.display = 'block'; return false;"
>Go to example.com</a>


<div id="popup">
    <p>Are you sure you want to go to example.com?</p>
    <p>
        <a onclick="document.location='http://example.com/'; return false;">
            Yes
        </a>
        <a onclick="document.getElementById('popup').style.display = 'none'; return false;">
            No
        </a>
    </p>
</div>

To get a more professional result I would recommend learning more about JavaScript and jQuery and investigating some of the options suggested by the other posters.

为了获得更专业的结果，我建议您学习更多关于 JavaScript 和 jQuery 的知识，并研究其他海报建议的一些选项。

回答by T.J. Crowder

The basics are:

基础知识是：

1. Create a transparent (or semi-transparent) iframe to cover the browser viewport, which does a couple of things for you:
   • Eats clicks outside your confirmation box
   • Prevents OS-drawn controls (like select boxes) from appearing on top of your confirmation box (which they'll do otherwise, on IE at least and possibly others)
   • And lets you (optionally) shade the rest of the page to highlight your confirmation box. Give the iframe a z-index(100, say, unless you have other elements on the page with a higher z-indexthan that).
2. Create a div that contains your yes/no question and buttons, append it to your main page's DOM, position it where you want it, and give the div a z-indexgreater than that of the iframe. Believe it or not, this means that the page is behind the iframe, but the div is in front of it. Exactly what you want.
3. Handle clicks on the buttons to tear the whole thing down (and to get your answer).
4. Remember that this will notbe inline with your JavaScript logic. You use callbacks from the buttons instead.

1. 创建一个透明（或半透明）的 iframe 来覆盖浏览器视口，它为您做了几件事：
   • 在您的确认框外获得点击次数
   • 防止操作系统绘制的控件（如选择框）出现在您的确认框顶部（否则他们会这样做，至少在 IE 上，可能还有其他人）
   • 并让您（可选）遮住页面的其余部分以突出显示您的确认框。给 iframe 一个z-index（比如说，100，除非页面上的其他元素高于z-index这个值）。
2. 创建一个包含是/否问题和按钮的 div，将其附加到主页的 DOM，将其放置在您想要的位置，并赋予 divz-index大于 iframe的 div 。信不信由你，这意味着页面在 iframe 后面，但 div 在它前面。正是你想要的。
3. 处理按钮上的点击以拆除整个事物（并获得您的答案）。
4. 请记住，这不会与您的 JavaScript 逻辑内联。您可以改用按钮​​的回调。

It really is that easy (or that complicated). :-)

真的就是那么简单（或者那么复杂）。:-)

Having said that, this wheel has been invented. Look for "lightbox" or similar components. jQuery UIhas one called Dialog, for instance, but just adding that to a page where you're not using jQuery UI for anything else may be a bit heavy.

话虽如此，这个轮子已经发明了。寻找“灯箱”或类似的组件。例如，jQuery UI有一个叫做Dialog，但是仅仅将它添加到一个你没有将 jQuery UI 用于其他任何东西的页面可能有点繁重。

回答by haylem

You cannot impact the use of the usual window.alert, window.confirmand window.prompt()native popup windows.

你可以不影响使用平常的window.alert，window.confirm和window.prompt()本地弹出窗口。

However, you could use other existing libraries for this, for instance ExtJS's MessageBox.

但是，您可以为此使用其他现有库，例如ExtJS的MessageBox。

MessageBox is part of ExtCore, so you wouldn't even need the whole library but simply the core functions.

MessageBox 是 ExtCore 的一部分，因此您甚至不需要整个库，而只需要核心功能。

Below is an easy example, using the Google AJAX Libraries API loader.

下面是一个使用 Google AJAX 库 API 加载器的简单示例。

within the <head>section of my.html:

在my.html的<head>部分中：

<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_API_KEY_GOES_HERE"></script>
<script type="text/javascript" src="my.js"></script>

in my.js:

在my.js 中：

google.load("dojo", "1.5", {
  uncompressed: true
});

function OnLoad() {


  function processResult() {
     /* do something here */
  }

  Ext.Msg.show({
     title:'Save Changes?',
     msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
     buttons: Ext.Msg.YESNOCANCEL,
     fn: processResult,
     icon: Ext.MessageBox.QUESTION
  });
}

google.setOnLoadCallback(OnLoad);

For more information, you can refer to my answer to another question on how to use the Google CDN.

更多信息可以参考我对另一个关于如何使用Google CDN的问题的回答。