Making a Javascript Yes/No Confirmation Box?_问答_开发者

well Javascript confirmation gives the Ok/Cancel Button but I want to create a Conf开发者_StackOverflow中文版irmation with Yes and No in Javascript can anyone help ??

The buttons in a confirmation box cannot be changed by 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.

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:

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 href so that it will still be functional even without Javascript. The onClick attribute of the first link has return false; This stops the link from redirecting.

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

<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.

The basics are:

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-index than that).
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-index greater 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.
Handle clicks on the buttons to tear the whole thing down (and to get your answer).
Remember that this will not be inline with your JavaScript logic. You use callbacks from the buttons instead.

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

Having said that, this wheel has been invented. Look for "lightbox" or similar components. jQuery UI has 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.

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

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

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

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

within the <head> section of my.html:

<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:

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.