我希望能夠對不同的對話框使用相同的警報容器。我目前有這個可以使用，但我希望看到它出現在 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">×</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);
}
};
更新：使用給出的示例，這是彈出視窗之一，但由于某種原因，它使整個螢屏變黑，中間顯示訊息 - 頂部..
$(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.");
});
uj5u.com熱心網友回復：
正如@Purtan 在評論部分所述。alert() 是一個內置的瀏覽器，而 HTML 代碼中的警報是引導程式類，它具有其他不同的類，如警報成功、警報資訊等。但是要實作您想要做的事情，您需要的是為您執行 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">×</span>
</button>
</div>
</div>
<div style="display:none" class="success">
<div class="alert alert-success" role="alert" id="dialog-success">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
然后你可以像這樣擁有你的腳本
if (!document.getElementById("AcceptTerms").checked) {
let alert=$(".success").html()
e.preventDefault();
$("#AcceptTerms").focus();
$(".alert-wrapper").html(alert)
}
uj5u.com熱心網友回復：
您正在尋找這樣的東西嗎？：
var myAlert = new bootstrap.Modal(document.getElementById('myAlert'))
function showAlert(msg, type) {
document.getElementById("alertContent").innerHTML = `
<div hljs-subst">${type} alert-dismissible fade show" role="alert">
${msg}
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>`
myAlert.show()
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/356568.html
上一篇：Directory.GetFiles總是附加應用程式檔案夾，即使給定路徑
下一篇：在回傳值的異步任務中捕獲例外