我想用Bootstrap模式覆盖默认的JavaScript确认弹出窗口。但是我不能使它与ASP. net的大多数控件的属性工作:"OnClientClark"。
以下是与aspx相关的内容:
<asp:TemplateField>
<ItemTemplate>
<asp:Button runat="server" Text="Delete" CssClass="btn btn-danger fullwidth"
OnClientClick="return confirm('Are you sure?')" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
这里是javascript:
window.confirm = function (message, callback, caption) {
confirmResponse = undefined
caption = caption || 'Confirm'
message = message.replace("\n", "<br />");
var modalContainer, modalHeader, modalBody, modalFooter;
/* Create modal if doesnt allready exists (to avoid dublicate modals) */
if ($("#confirmation-modal").length != 1) {
modalContainer = $('<div>').attr({ 'class': 'modal fade', 'id': 'confirmation-modal' });
var modalDialog = $('<div>').attr({ 'class': 'modal-dialog' });
var modalContent = $('<div>').attr({ 'class': 'modal-content' });
modalHeader = $('<div>').attr({ 'class': 'modal-header' });
modalBody = $('<div>').attr({ 'class': 'modal-body' });
modalFooter = $('<div>').attr({ 'class': 'modal-footer' });
modalContainer.html($(modalDialog));
modalDialog.html($(modalContent));
modalContent.html($(modalHeader));
modalContent.append($(modalBody));
modalContent.append($(modalFooter));
} else {
modalContainer = $("#confirmation-modal");
modalHeader = $("#confirmation-modal .modal-header");
modalBody = $("#confirmation-modal .modal-body");
modalFooter = $("#confirmation-modal .modal-footer");
}
/* Set content of modal */
modalHeader.html('<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">' + caption + '</h4>');
modalBody.html('<p>' + message + '</p>');
var modalTrueBtn = $('<button type="button" class="btn btn-default">Yes</button>').click(function () {
if (callback != undefined) callback();
console.log("confirm returned true");
return true;
});
var modalFalseBtn = $('<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>').click(function () {
console.log("confirm returned false");
return false;
});
modalFooter.html(modalTrueBtn).append(modalFalseBtn);
/* show modal */
modalContainer.modal();
};
创建模态的代码部分很好。它弹出的很好,但不会返回真/假。
第一步:在按钮上,你要么有OnClientClark="openMyModal()",要么你把代码放在后面
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "none", "openMyModal()", True)
第二步:或者从你的模态确定按钮调用一个javascript/jQuery函数,或者把runat="server"放在你的模态确定按钮上,让它回发,并在那里放适当的代码来执行你的操作。
为了清晰起见,我最初没有显示Bootstrap模态标记以及openMyModal函数,但是这样的函数看起来像这样:
function openMyModal() {
$('#myModal').modal({
show: true
})
}