製作Javascript是/否確認框？

3

確認框中的按鈕不能被Javascript更改。

我建議您以內聯彈出窗口的形式滾動自己的內容。只需在頁面中央創建一個與position:absolute;的div，然後顯示/隱藏它。

編輯：

下面的代碼將列出你需要使用Javascript香草做什麼。你可能會想花更多的時間來設計它，但關鍵點是：

position:absolute;這樣彈出窗口就會出現在頁面的中心。 display:none;這樣，當頁面加載時，彈出窗口將被隱藏。該鏈接有一個href，因此即使沒有Javascript，它仍然可以正常工作。第一個鏈接的onClick屬性返回false;這會阻止鏈接重定向。

您可以更改彈出窗口中的兩個onClick以完成您想要的任何操作。

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

爲了得到一個更專業的結果，我會建議更多地瞭解JavaScript和jQuery和調查一些由其他海報建議的選項。

來源

2010-10-18 10:08:35

+0

你能舉個簡單的例子嗎？我是JavaScript的新手請問它會很好嗎？ – Seeker 2010-10-18 10:15:45

+0

@BuhBuh很好的例子。只是一個小注 - div的id需要更改爲彈出以匹配css – 2011-11-21 08:47:44

+0

@esther h非常感謝，完成了。總會有一些小錯誤！ – 2011-11-21 12:41:12

0

您不能影響通常使用的window.alert,window.confirm和window.prompt()原生彈出窗口。

但是，您可以使用其他現有的庫，例如ExtJS的MessageBox。

MessageBox是ExtCore的一部分，所以你甚至不需要整個庫，但只需核心功能。

下面是一個簡單的例子，使用Google AJAX庫API加載器。

部分的<head>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>

在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);

欲瞭解更多信息，你可以參考我的回答另一個問題上how to use the Google CDN。

來源

2010-10-18 10:05:43 haylem

1

基本要點有：

創建一個透明（或半透明）的iframe覆蓋瀏覽器窗口，它做了幾件事情對你：
- 實惠點擊您的確認框
- 防止操作系統繪製的控件（如選擇框）出現在確認框的頂部（否則它們會在IE上至少可能出現其他情況）
- 並讓您（可選）遮蔽其餘部分頁面突出顯示您的確認框。給iframe一個z-index（100，比方說，除非你在頁面上有更高的z-index的其他元素）。
創建一個包含你的是/否問題，按鈕的股利，將其附加到你的主頁的DOM，你想要它，並把它給DIV比IFRAME的z-index更大。相信與否，這意味着該頁面在iframe後面，但div在它的前面。正是你想要的。
處理單擊按鈕將所有東西撕下（並獲得答案）。
請記住，這將而不是內嵌您的JavaScript邏輯。您可以使用按鈕上的回調代替。

真的是那麼容易（或那麼複雜）。 :-)

話雖如此，這個輪子已被髮明。尋找「燈箱」或類似的組件。例如，jQuery UI有一個名爲Dialog的例子，但只是將其添加到您未使用jQuery UI進行其他任何操作的頁面可能有點沉重。

來源

2010-10-18 10:06:00

製作Javascript是/否確認框？

回答

相關問題