Модальное окно подтверждения с использованием JQuery в ASP.Net

Question

Мне нужно похожее поведение параметра «Подтвердить удаление» в ASP.Net Gridview, так как этот вопрос показывает Как добавить параметр «Подтвердить удаление» в ASP.Net Gridview? , но с использованием Jquery Confirm Box.

У меня много проблем с поведением обратной передачи и потоком страниц asp.net.

Я хочу, чтобы все было просто, как:

<asp:Button ID="ButtonRemove" runat="server" Text="<%$ Resources:Localizacao, BUTTON_REMOVE %>" OnClick="ButtonRemove_Click" OnClientClick="displayConfirmDialog();/>

Какая-то идея, как я могу запустить событие OnClick в javascript или как можно вставить Panel в качестве подтверждения?

* сегодня я использую ajaxcontroltoolkit, но поскольку это было прекращено, я пытаюсь найти более элегантную альтернативу.

Answer 1

1 - есть скрытый div, который будет вашим диалоговым окном.Поместите это в конец HTML-кода, вне разметки главной страницы.

<div id="dialog1" class="dialog" style="display:none">
   SOME TEXT
   <a href="javascript://" onclick="confirmDialog()">CONFIRM</a>
</div>

Создайте его так:

.dialog {
   position:absolute;
   width:250px;
   height:250px;
   background-color:#ffffff
}

.dialog a {
    display:block;
    padding:5px;
    margin-top:50px;
    background-color:#c0c0c0
}

2 - отцентрируйте диалоговое окно перед его отображением:

centerMe('#dialog1')

function centerMe(element) {
    //pass element name to be centered on screen
    var pWidth = jQuery(window).width();
    var pTop = jQuery(window).scrollTop()
    var eWidth = jQuery(element).width()
    var height = jQuery(element).height()
    jQuery(element).css('top', pTop + 100 + 'px')
    jQuery(element).css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px')
}

3 - показать диалоговое окно:

jQuery('#dialog1').fadeIn('slow')

4 - создать функцию для обработки кнопки ПОДТВЕРДИТЬ:

function confirmDialog() {
    jQuery('#dialog1').hide()
    ... your code ...
}

Если вы хотите получить фантазию, вы можете создатьфоновое изображение для диалога вместо простого белого фона.