在ASP.Net中使用JQuery的模态确认框

时间:2011-03-15 13:36:53

标签: javascript jquery asp.net ajax

我想在ASP.Net Gridview中使用“确认删除”选项的类似行为,因为这个问题显示How to add a "confirm delete" option in ASP.Net Gridview?但是使用了Jquery Confirm Box。

我在回发行为和asp.net页面流方面遇到了很多问题。

我想简单地说:

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

有些想法如何在javascript中触发OnClick事件,或者如何将Panel作为确认对话框?

*今天我使用了ajaxcontroltoolkit,但由于这已经停止,我正试图找出一些更优雅的选择。

1 个答案:

答案 0 :(得分:0)

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 - 创建一个处理CONFIRM按钮的函数:

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

如果你想获得幻想,你可以为对话框而不是简单的白色背景创建背景图像。