[英]Modal Confirm Box Using JQuery in ASP.Net
I want a similar behavior of “confirm delete” option in ASP.Net Gridview, as this questions shows How to add a "confirm delete" option in ASP.Net Gridview? 我希望在ASP.Net Gridview中具有“确认删除”选项的类似行为,因为此问题显示了如何在ASP.Net Gridview 中添加“确认删除”选项? but using Jquery Confirm Box.
但是使用Jquery确认框。
I'm having a lot of problem with postback behavior and asp.net page flow. 我在回发行为和asp.net页面流方面遇到很多问题。
I want domething simple as: 我想做一些简单的事情:
<asp:Button ID="ButtonRemove" runat="server" Text="<%$ Resources:Localizacao, BUTTON_REMOVE %>" OnClick="ButtonRemove_Click" OnClientClick="displayConfirmDialog();/>
Some idea how I can fire the OnClick event in javascript, or how a can put a Panel as confirm dialog? 一些想法,我如何可以触发javascript中的OnClick事件,或者如何将面板作为确认对话框?
*today I use ajaxcontroltoolkit, but as this was discontinued I'm trying to figure out some more elegant alternative. *今天我使用了ajaxcontroltoolkit,但是由于已经停产,所以我试图找出一些更优雅的选择。
1 - have a hidden div that is going to be your dialog box. 1-具有一个将作为对话框的隐藏div。 Put this at the bottom of your HTML, outside your main page markup.
将其放在您的HTML底部,主页标记之外。
<div id="dialog1" class="dialog" style="display:none">
SOME TEXT
<a href="javascript://" onclick="confirmDialog()">CONFIRM</a>
</div>
Style it like so: 样式如下:
.dialog {
position:absolute;
width:250px;
height:250px;
background-color:#ffffff
}
.dialog a {
display:block;
padding:5px;
margin-top:50px;
background-color:#c0c0c0
}
2 - Center the dialog before showing it: 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 - show the dialog: 3-显示对话框:
jQuery('#dialog1').fadeIn('slow')
4 - create a function to handle the CONFIRM button: 4-创建一个函数来处理CONFIRM按钮:
function confirmDialog() {
jQuery('#dialog1').hide()
... your code ...
}
If you want to get fancy you can create a background image for the dialog instead of a simple white background. 如果想花哨的话,可以为对话框创建背景图像,而不是简单的白色背景。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.