时间戳

首页 > 解决方案 > 如何在脚本中使用对话框制作警报 onclick 功能以将警报容器重用于其他对话框

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

问题描述

我希望能够为不同的对话框使用相同的警报容器。我目前有这个可以工作，但我希望看到它出现在 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 - 顶部显示消息。

    $(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.");
});

标签： javascriptc#asp.net-mvc

解决方案

正如@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")
}

推荐阅读