如何个性化警报按钮 - window.confirm() 和 window.alert()

2022-01-20 00:00:00 popup jquery javascript

我看到许多网站都使用不同的按钮文本来个性化他们的警报和确认框.

默认情况下，这是 JavaScript window.confirm() 函数将输出的内容:

+-----------------------------+|网页留言|+------------------------------+|弹出文字 ||||||||||[确定] [取消] |+------------------------------+

但是，如果我想要自定义标题文本和自定义按钮文本等自定义内容怎么办?

+-----------------------------+|我的自定义标题 |+------------------------------+|弹出文字 ||||||||||[你好] [再见] |+------------------------------+

这可以用 JavaScript、Jquery 或 AJAX(或其他语言)实现吗?如果是这样，你能给我举个例子吗?谢谢！

解决方案

我不会在这里发现任何新东西.创建的评论说明了所有最相关的信息.

您应该查看具有强大支持且易于定制的开源替代方案.看看 (包括js、css等)

  • 解压文件.
  • 然后复制并粘贴示例代码并将其保存为example.html或任何你想要的.
  • 现在更改链接，使其指向您下载的文件(查看我如何更改我的文件)
  • 保存文件并使用您喜欢的浏览器对其进行测试.

    • 我刚刚做了，效果很好！(在 Firefox 和 Chromium 下)

    注意:我用新版本的 BootStrap (v.3) 对其进行了测试，但它不起作用.

    I have seen many websites that have personalized their alert and confirmation boxes with different button text.

    By default, this is what the JavaScript window.confirm() function would output:

    +-----------------------------+
|Message from webpage         |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [Ok]     [Cancel]         |
+-----------------------------+

    But, what if I wanted some customization like custom header text, and custom button text?

    +-----------------------------+
|My custom Header             |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [HELLO]     [GOODBYE]     |
+-----------------------------+

    Can this be achieved in JavaScript, Jquery, or AJAX (or another language)? If so, could you please show me an example? Thanks!

    解决方案

    I wont discover anything new here. And the comments created say all the most relevant information.

    You should look at open source alternatives that have great support and are easy to customize. Take a look at BootBoxJS (it depends on jQuery).

    In that site you can find examples of alerts, dialogs, and other useful tools. e.g.

    To use the mentioned soft:

    1. Download the js library compressed (including js, css, etc)
    2. Unzip the file whatever you want to.
    3. Then copy and paste the example code and save this as example.html or whatever you want to.
    4. Now change the links to make it point to your downloaded files (see how I changed my file)
    5. Save the file and test it with your preferred browser.

    I just did it and it works perfect! (Under Firefox and Chromium)

    NOTE: I tested it with the new version of BootStrap (v.3) and it doesn't work.

    相关文章