如何在脚本中使用对话框制作警报 onclick 功能以将警报容器重用于其他对话框

Posted 2023-04-01

【中文标题】如何在脚本中使用对话框制作警报 onclick 功能以将警报容器重用于其他对话框

【英文标题】：How to make alert onclick function with dialog in script to reuse alert container for other dialog

【发布时间】：2021-12-24 10:02:04

【问题描述】：

我希望能够为不同的对话框使用相同的警报容器。我目前有这个工作，但我希望看到它显示在 boostrap 警报中 - 样式而不是常规弹出窗口。

这是我的警报容器：

<div class="alert alert-warning" role="alert" id="dialog">            
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

这是我的 javascript：

 $(document).on("click", "#TypedName", function () 
    alert("By typing your name in the signature box, you are certifying that you are the authorized representative who completed the application and the information provided is accurate to the best of your knowledge.");
);

然后我会在同一个容器中显示其他带有对话框的警报。

像这样：

if (!document.getElementById("AcceptTerms").checked) 
      e.preventDefault();
      $("#AcceptTerms").focus();
      alert("You must accept terms and conditions in order to proceed to the next step.", "error");

我看过但我能找到的只是一个按钮打开警报的示例，其中文本已经在容器中。

也许是另一个功能？所以它会是这样的：

application.Alert("Custom Message!"); 还想在字符串中添加一些 html。对于<p> 和<br />

感谢您的帮助！

更新： 这就是我一直在寻找的，也许是一个允许这种行为的函数。

    $(document).on("click", "#TypedName", function () 
    appFunc.Alert("By typing your name in the signature box, you are certifying that you are the authorized representative who <br> <div class='text-center'>completed the application and the information provided is accurate to the best of your knowledge.</div>", "warning");
);

所以 appFunction 将是一个允许弹出对话框的函数，可能只是使用这个：

<span id="popupNotification"></span>

更新： 我发现了一些可以按照我想要的方式工作的东西，但是它是用 KENDO 完成的。有没有办法使用 Jquery 来做到这一点？

var appFunc = 
Alert: function (content, _mode, appendTo, _autoHideAfter) 

    var mode = (_mode !== undefined) ? _mode : "error";
    var autoHideAfter = (_autoHideAfter !== undefined) ? _autoHideAfter : 10000;

    if (GlobalVariables.NotificationWindow === null) 
        GlobalVariables.NotificationWindow = $("#popupNotification").kendoNotification(
            position:  pinned: true, top: 30, right: 30 ,
            autoHideAfter: autoHideAfter,
            stacking: "down",
            appendTo: appendTo,
            button: true,
            show: function (e) 
                if (!appendTo) 
                    if (!$("." + e.sender._guid)[1]) 
                        var element = e.element.parent(),
                            eWidth = element.width(),
                            eHeight = element.height(),
                            wWidth = $(window).width(),
                            wHeight = $(window).height(),
                            newTop, newLeft;

                        newLeft = Math.floor(wWidth / 2 - eWidth / 2);
                        if (newLeft < 0) 
                            newLeft = 0;
                        
                        newTop = Math.floor(wHeight / 3 - eHeight / 3);

                        e.element.parent().css( top: newTop, left: newLeft );
                    
                
            
        ).data("kendoNotification");
    

    GlobalVariables.NotificationWindow.show(content, mode);

;

更新：使用给出的示例，这是弹出窗口之一，但由于某种原因，它会使整个屏幕变黑，消息在 middel - top..

    $(document).on("click", "#TypedName", function () 
    showAlert("By typing your name in the signature box, you are certifying that you are the authorized representative who completed the application and the information provided is accurate to the best of your knowledge.");
);

【问题讨论】：

alert() 函数使用浏览器的“警报框”，如果您想在警报容器上设置消息然后设置该容器的文本，请不要使用 alert()

正如我上面所说，我想重用容器。我不想在我的页面上有 10 个不同的警报容器。

见上面的更新。我添加了一些我正在寻找的东西。这也会在字符串末尾给出警报类型。

【参考方案1】：

你正在寻找这样的东西吗？：

var myAlert = new bootstrap.Modal(document.getElementById('myAlert'))

function showAlert(msg, type) 
  document.getElementById("alertContent").innerHTML = `
      <div class="alert alert-$type alert-dismissible fade show" role="alert">
        $msg
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>`
  myAlert.show()

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div id="myAlert" class="modal" tabindex="-1">
  <div id="alertContent" class="modal-dialog"></div>
</div>

<button onclick="showAlert('This is a warning alert<br>And a break', 'warning')">Warning</button>
<button onclick="showAlert('This is a danger alert', 'danger')">Danger</button>
<button onclick="showAlert('This is a success alert', 'success')">Success</button>

【讨论】：

是的..这可以工作，但是我遇到了样式问题，请参见上面添加代码的位置。它使整个屏幕变黑，并在页面顶部显示消息..不知道为什么..

【参考方案2】：

正如@Purtan 在评论部分所述。 alert() 是内置的浏览器，而 HTML 代码中的 alert 是引导类，它具有其他不同的类，如 alert-success、alert-info 等。但是要实现您想做的事情，您需要的是一个为您执行 DOM 操作的 javascript 代码，并且由于您已经添加了 JQuery，这让生活变得更轻松。

<div class="alert-wrapper">     
  <div class="alert alert-warning" role="alert" id="dialog">            
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
  </div>
</div> 

然后你可以有这样的脚本

if (!document.getElementById("AcceptTerms").checked) 
 e.preventDefault();
 $("#AcceptTerms").focus();
 $("<span>My new warning messages </span>").insertBefore(".close")

【讨论】：

这表明我必须有多个框来显示我试图避免的警告、错误等。在他们每个人中，我都必须有我需要的任何信息。而不是仅仅重用同一个容器并让 javascript 生成带有警报类型的对话框。我相信这会对某人有所帮助，但不是我想要的。

好吧，你实际上仍然可以扭曲 javascript 部分来实现这一点