制作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是/否确认框？

回答

相关问题