Jquery UI 대화 상자에서 "확인" 대화 상자를 구현하는 방법은 무엇입니까?
UI 하기 위해 JQuery UI Dialog를 사용하려고 .javascript:alert()상자. 제 시나리오에서는 항목 목록이 있고, 각 항목 옆에 각 항목에 대한 "삭제" 버튼이 있습니다.psuedo html 설정은 다음과 같습니다.
<ul>
<li>ITEM <a href="url/to/remove"> <span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>
<div id="confirmDialog">Are you sure?</div>
JQ 파트에서 문서 준비가 완료되면 먼저 div를 필요한 버튼이 있는 모달 대화 상자로 설정하고 "a"를 제거하기 전에 확인으로 설정합니다.
$("ul li a").click(function() {
// Show the dialog
return false; // to prevent the browser actually following the links!
}
자, 여기 문제가 있습니다.초기화 시간 동안 대화상자는 누가 (항목) 그것을 시작할 것인지 그리고 또한 항목 ID(!)를 알지 못합니다.사용자가 여전히 "예"를 선택하면 링크를 따라 제거하려면 확인 버튼의 동작을 설정하려면 어떻게 해야 합니까?
저는 단지 같은 문제를 해결해야만 했습니다.이 일을 성공시키기 위한 열쇠는dialog는 서부분으초합니에서 부분적으로 .click확인 기능을 사용할 링크의 이벤트 핸들러입니다(둘 이상의 링크에 대해 이 기능을 사용하려는 경우).확인 버튼 클릭을 위해 링크의 대상 URL을 이벤트 처리기에 입력해야 하기 때문입니다.CSS 클래스를 사용하여 확인 동작이 필요한 링크를 지정했습니다.
여기 제 해결책이 있습니다. 예시로 적합하도록 추상화되어 있습니다.
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
이 CSS 클래스CSS 클래스, CSS 클래스, CSS 클래스)와 링크를 생성할 수 효과가 있을 .confirmLink나의 예에서는).
여기 코드가 들어 있는 jsfiddle이 있습니다.
완전한 공개를 위해, 저는 이 특정한 문제에 대해 몇 분을 소비했고 이 질문에 비슷한 대답을 제공했다는 것에 주목할 것입니다. 이 질문은 당시에도 받아들여진 대답이 없었습니다.
클릭 이벤트에서 대화 상자를 인스턴스화한 후 옵션을 설정하는 방식이 잘못되었기 때문에 폴의 답변이 제대로 작동하지 않았습니다.여기 작동하던 제 코드가 있습니다.폴의 예에 맞게 커스터마이즈하지는 않았지만 일부 요소의 이름만 다를 뿐입니다.당신은 그것을 해결할 수 있을 것입니다.클릭 이벤트의 버튼에 대한 대화 상자 옵션의 설정자에 수정이 있습니다.
$(document).ready(function() {
$("#dialog").dialog({
modal: true,
bgiframe: true,
width: 500,
height: 200,
autoOpen: false
});
$(".lb").click(function(e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog").dialog('option', 'buttons', {
"Confirm" : function() {
window.location.href = theHREF;
},
"Cancel" : function() {
$(this).dialog("close");
}
});
$("#dialog").dialog("open");
});
});
이것이 다른 사람에게 도움이 되길 바랍니다. 이 게시물은 원래 저를 올바른 방향으로 이끌었기 때문에 저는 수정 사항을 게시하는 것이 좋을 것이라고 생각했습니다.
나는 jquery ui confirm 대화상자를 위한 나만의 기능을 만들었습니다.여기 코드가 있습니다.
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
draggable: false,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
buttons: {
OK: function () {
if (typeof (okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function () {
if (typeof (cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
이제 코드에 이것을 사용하려면 다음과 같이 쓰십시오.
myConfirm('Do you want to delete this record ?', function () {
alert('You clicked OK');
}, function () {
alert('You clicked Cancel');
},
'Confirm Delete'
);
계속해요
방금 시도한 간단하고 짧은 해결책이 효과적입니다.
$('.confirm').click(function() {
$(this).removeClass('confirm');
$(this).text("Sure?");
$(this).unbind();
return false;
});
그런 다음 링크에 class="download"를 추가하면 작동합니다!
이게 제 해결책입니다.나는 그것이 누구에게 도움이 되기를 바랍니다.카피페이스트가 아니라 즉석에서 써있으니 실수가 있으면 용서해주세요.
$("#btn").on("click", function(ev){
ev.preventDefault();
dialog.dialog("open");
dialog.find(".btnConfirm").on("click", function(){
// trigger click under different namespace so
// click handler will not be triggered but native
// functionality is preserved
$("#btn").trigger("click.confirmed");
}
dialog.find(".btnCancel").on("click", function(){
dialog.dialog("close");
}
});
개인적으로 저는 이 해결책을 선호합니다 :)
편집: 죄송합니다.제가 정말 더 자세히 설명했어야 했습니다.저는 그것이 우아한 해결책이라고 생각하기 때문에 그것을 좋아합니다.사용자가 먼저 확인해야 할 버튼을 클릭하면 이벤트가 취소됩니다.확인 버튼을 클릭하면 링크 클릭을 시뮬레이션하는 것이 아니라 확인 대화 상자가 없는 경우 트리거된 원래 버튼에서 동일한 네이티브 jquery 이벤트(클릭)를 트리거하는 것이 해결책입니다.유일한 차이점은 확인 대화 상자가 다시 표시되지 않도록 다른 이벤트 네임스페이스(이 경우 '확인됨')입니다.그러면 Jquery 네이티브 메커니즘이 인계되어 예상대로 작동할 수 있습니다.또 다른 장점은 버튼과 하이퍼링크에 사용할 수 있다는 것입니다.제가 충분히 명확했으면 좋겠습니다.
이것이 오래된 질문이라는 것을 알지만 MVC4의 HTML5 데이터 속성을 사용하는 제 솔루션은 다음과 같습니다.
<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
Are you sure about this?
</div>
JS 코드:
$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons: {
"Confirm": function () {
window.location.href = $(this).data('url');
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#TheIdOfMyButton").click(function (e) {
e.preventDefault();
$("#dialog").dialog("open");
});
이것으로 충분합니까?
$("ul li a").click(function(e) {
e.preventDefault();
$('#confirmDialog').show();
var delete_path = $(this).attr('href');
$('#confirmDialog a.ok').unbind('click'); // just in case the cancel link
// is not the only way you can
// close your dialog
$('#confirmDialog a.ok').click(function(e) {
e.preventDefault();
window.location.href = delete_path;
});
});
$('#confirmDialog a.cancel').click(function(e) {
e.preventDefault();
$('#confirmDialog').hide();
$('#confirmDialog a.ok').unbind('click');
});
위와 같이.이전 게시물들은 저를 올바른 방향으로 이끌었습니다.이게 제가 한 방법입니다.이 아이디어는 테이블의 모든 행 옆에 이미지를 두는 것입니다(데이터베이스에서 PHP 스크립트로 생성됨).이미지를 클릭하면 사용자가 URL로 리디렉션되어 jQuery UI Dialog 내에서 클릭한 레코드와 관련된 일부 데이터를 표시하는 동안 데이터베이스에서 해당 레코드가 삭제됩니다.
JavaScript 코드:
$(document).ready(function () {
$("#confirmDelete").dialog({
modal: true,
bgiframe: true,
autoOpen: false
});
});
function confirmDelete(username, id) {
var delUrl = "/users/delete/" + id;
$('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
$('#confirmDelete').dialog('option', 'buttons', {
"No": function () {
$(this).dialog("close");
},
"Yes": function () {
window.location.href = delUrl;
}
});
$('#confirmDelete').dialog('open');
}
대화 상자 div:
<div id="confirmDelete" title="Delete User?"></div>
이미지 링크:
<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>
이렇게 하면 PHP 루프 값을 대화 상자로 전달할 수 있습니다.유일한 단점은 GET 방법을 사용하여 실제로 작업을 수행하는 것입니다.
이거 어때:
$("ul li a").click(function() {
el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
draggable:true,
modal: true,
buttons: { "Ok": function() {
el.parent().remove();
$(this).dialog("close"); } }
});
$("#confirmDialog").dialog("open");
return false;
});
다음 html에서 테스트했습니다.
<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>
그것은 전체 li 요소를 제거합니다. 필요에 따라 조정할 수 있습니다.
(2016년 03월 22일 기준으로 에 링크된 페이지의 다운로드가 작동하지 않습니다.개발자가 어느 시점에서 수정할 경우를 대비해 링크를 남겨두는 것은 훌륭한 작은 플러그인이기 때문입니다.원래 게시물은 다음과 같습니다.대안이자 실제로 작동하는 링크: jquery.confirm.)
필요에 따라 너무 간단할 수도 있지만 이 jQuery confirm 플러그인을 사용해 보십시오.이것은 정말 사용하기 쉽고 많은 경우에 그 일을 합니다.
제가 eval을 사용하는 것을 싫어하는 만큼, 다른 상황에 따라 많은 문제를 일으키지 않고 제게 가장 쉬운 방법인 것 같았습니다.자바스크립트 설정 시간 제한 기능과 유사합니다.
<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
<p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: false,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
eval(callback)
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
}
function do_function(params){
console.log('approved');
}
</script>
제가 직접 이 문제에 부딪혀 해결책을 찾았는데, 이 문제는 여기에 나와 있는 몇 가지 답과 비슷하지만, 약간 다르게 구현되었습니다.저는 자바스크립트나 플레이스홀더 디브 같은 것을 별로 좋아하지 않았습니다.저는 각 용도에 자바스크립트를 추가하지 않고 HTML에서 사용할 수 있는 일반화된 솔루션을 원했습니다.제가 생각해 낸 것은 다음과 같습니다(이것은 jqueryui를 필요로 합니다).
Javascript:
$(function() {
$("a.confirm").button().click(function(e) {
e.preventDefault();
var target = $(this).attr("href");
var content = $(this).attr("title");
var title = $(this).attr("alt");
$('<div>' + content + '</div>'). dialog({
draggable: false,
modal: true,
resizable: false,
width: 'auto',
title: title,
buttons: {
"Confirm": function() {
window.location.href = target;
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
});
그런 다음 HTML에서는 Javascript 호출이나 참조가 필요하지 않습니다.
<a href="http://www.google.com/"
class="confirm"
alt="Confirm test"
title="Are you sure?">Test</a>
타이틀 속성이 div 콘텐츠에 사용되기 때문에 사용자는 버튼 위에 마우스를 올려놓음으로써 확인 질문을 받을 수 있습니다(그래서 타일의 타이틀 속성을 사용하지 않았습니다).확인 창의 제목은 alt 태그의 내용입니다.javascript snip은 일반화된 .js include에 포함될 수 있으며, 클래스를 적용하는 것만으로도 예쁜 확인 창을 가질 수 있습니다.
이 질문이 오래된 질문인 것은 알지만 확인 대화 상자를 사용해야 하는 것은 이번이 처음이었습니다.저는 이것이 그것을 하는 가장 짧은 방법이라고 생각합니다.
$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
var conBox = confirm("Are you sure ?");
if(conBox){
// Do what you have to do
}
else
return;
});
마음에 드셨으면 좋겠습니다 :)
매우 인기 있는 주제와 구글은 "jquery dialog close which event clicked" 쿼리에 대해 이것을 찾습니다.내 솔루션은 YES, NO, ESC_KEY,X 이벤트를 올바르게 처리합니다.나는 대화상자가 어떻게 배치되었든 내 콜백 기능이 호출되기를 원합니다.
function dialog_YES_NO(sTitle, txt, fn) {
$("#dialog-main").dialog({
title: sTitle,
resizable: true,
//height:140,
modal: true,
open: function() { $(this).data("retval", false); $(this).text(txt); },
close: function(evt) {
var arg1 = $(this).data("retval")==true;
setTimeout(function() { fn(arg1); }, 30);
},
buttons: {
"Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
"No": function() { $(this).data("retval", false); $(this).dialog("close"); }
}
});
}
- - - -
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
alert("Dialog retval is " + status);
});
브라우저를 새 URL로 리디렉션하거나 함수 검색에서 다른 작업을 수행하는 것이 쉽습니다.
$("ul li a").live('click', function (e) {
e.preventDefault();
$('<div></div>').appendTo('body')
.html('<div><h6>Are you sure about this?</h6></div>')
.dialog({
modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
width: 'auto', modal: true, resizable: false,
buttons: {
Confirm: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
window.location.reload();
},
No: function () {
$(this).dialog("close");
}
},
Cancel: function (event, ui) {
$(this).remove();
}
});
return false;
});
참고: 의견을 제시하기에는 충분하지 않지만 BineG의 답변은 Homer와 echo가 강조한 ASPX 페이지의 포스트백 문제를 해결하는 데 완벽하게 작동합니다.여기 동적 대화상자를 사용한 변형이 있습니다.
$('#submit-button').bind('click', function(ev) {
var $btn = $(this);
ev.preventDefault();
$("<div />").html("Are you sure?").dialog({
modal: true,
title: "Confirmation",
buttons: [{
text: "Ok",
click: function() {
$btn.trigger("click.confirmed");
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]
}).show();
});
컨트롤이 두 개의 다른 HTML 컨트롤로 렌더링되는 'asp:linkbutton' 또는 'asp:button'인지 확인하는 위의 또 다른 변형입니다.저에게 딱 맞는 것처럼 보이지만 광범위하게 테스트하지는 않았습니다.
$(document).on("click", ".confirm", function (e) {
e.preventDefault();
var btn = $(this);
$("#dialog").dialog('option', 'buttons', {
"Confirm": function () {
if (btn.is("input")) {
var name = btn.attr("name");
__doPostBack(name, '')
}
else {
var href = btn.attr("href");
window.location.href = href;
}
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
});
$("#dialog").dialog("open");
});
ASP 내의 링크 버튼에 사용할 수 있는 제품을 찾고 있었습니다.NET Gridview (GridView Control build in Commands) 따라서 대화상자의 "Confirm" 작업은 런타임에 Gridview 컨트롤에 의해 생성된 스크립트를 활성화해야 합니다.이것은 나에게 효과가 있었습니다.
$(".DeleteBtnClass").click(function (e) {
e.preventDefault();
var inlineFunction = $(this).attr("href") + ";";
$("#dialog").dialog({
buttons: {
"Yes": function () {
eval(inlineFunction); // eval() can be harmful!
},
"No": function () {
$(this).dialog("close");
}
}
});
});
개인적으로 저는 이것이 많은 ASP의 많은 관점에서 반복적인 요구사항이라고 생각합니다.Net MVC 응용 프로그램.
그래서 모델 클래스와 부분 뷰를 정의했습니다.
using Resources;
namespace YourNamespace.Models
{
public class SyConfirmationDialogModel
{
public SyConfirmationDialogModel()
{
this.DialogId = "dlgconfirm";
this.DialogTitle = Global.LblTitleConfirm;
this.UrlAttribute = "href";
this.ButtonConfirmText = Global.LblButtonConfirm;
this.ButtonCancelText = Global.LblButtonCancel;
}
public string DialogId { get; set; }
public string DialogTitle { get; set; }
public string DialogMessage { get; set; }
public string JQueryClickSelector { get; set; }
public string UrlAttribute { get; set; }
public string ButtonConfirmText { get; set; }
public string ButtonCancelText { get; set; }
}
}
그리고 나의 부분적인 견해는:
@using YourNamespace.Models;
@model SyConfirmationDialogModel
<div id="@Model.DialogId" title="@Model.DialogTitle">
@Model.DialogMessage
</div>
<script type="text/javascript">
$(function() {
$("#@Model.DialogId").dialog({
autoOpen: false,
modal: true
});
$("@Model.JQueryClickSelector").click(function (e) {
e.preventDefault();
var sTargetUrl = $(this).attr("@Model.UrlAttribute");
$("#@Model.DialogId").dialog({
buttons: {
"@Model.ButtonConfirmText": function () {
window.location.href = sTargetUrl;
},
"@Model.ButtonCancelText": function () {
$(this).dialog("close");
}
}
});
$("#@Model.DialogId").dialog("open");
});
});
</script>
그런 다음 보기에서 필요할 때마다 @Html을 사용합니다.부분(JQuery가 정의되도록 섹션 스크립트에서 수행):
@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})
이 방법은 확인 대화상자가 필요한 요소와 일치하는 JQueryClickSelector를 지정하는 것입니다.제 경우 모든 앵커가 SyLinkDelete 클래스를 가지고 있지만 식별자, 다른 클래스 등일 수 있습니다.나에게 그것은 다음의 목록이었습니다.
<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
<img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>
여기에 좋은 답변들이 많이 있습니다 ;) 제 접근법은 이렇습니다.eval() 사용과 유사합니다.
function functionExecutor(functionName, args){
functionName.apply(this, args);
}
function showConfirmationDialog(html, functionYes, fYesArgs){
$('#dialog').html(html);
$('#dialog').dialog({
buttons : [
{
text:'YES',
click: function(){
functionExecutor(functionYes, fYesArgs);
$(this).dialog("close");
},
class:'green'
},
{
text:'CANCEL',
click: function() {
$(this).dialog("close");
},
class:'red'
}
]
});
}
용도는 다음과 같습니다.
function myTestYesFunction(arg1, arg2){
alert("You clicked YES:"+arg1+arg2);
}
function toDoOrNotToDo(){
showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}
즉시 사용할 수 있는 JQuery UI는 다음과 같은 솔루션을 제공합니다.
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );
HTML
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
JQuery 기능의 이름을 제공하고 파라미터로 표시할 텍스트/제목을 전달하여 이를 추가로 사용자 정의할 수 있습니다.
참고 자료: https://jqueryui.com/dialog/ #http://ation
이것이 당신의 질문에 대한 답입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
body{margin:0;padding:0;background-color:#ffffff;}
a:link {color:black;}
a:visited {color:black;}
a:hover {color:red;}
a:active {color:red;}
</style>
</HEAD>
<body>
<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
<script src="jquery-1.4.4.js"></script>
<script src="external/jquery.bgiframe-2.1.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.resizable.js"></script>
<script src="ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="demos.css">
<script>
var lastdel;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,modal: true,closeOnEscape: true
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var lastdel = $(this).attr("href");
});
$("#si").click( function() {
$('#dialog').dialog('close');
window.location.href =lastdel;
});
$("#no").click( function() {
$('#dialog').dialog('close');
});
});
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentimgx;
var cimgoverx=200-6;
var cimgoutx=200;
function overbx(obj){
color='#FF0000';
width='3px';
obj.style.borderTopWidth = width;
obj.style.borderTopColor =color;
obj.style.borderTopStyle ='solid';
obj.style.borderLeftWidth = width;
obj.style.borderLeftColor =color;
obj.style.borderLeftStyle ='solid';
obj.style.borderRightWidth = width;
obj.style.borderRightColor =color;
obj.style.borderRightStyle ='solid';
obj.style.borderBottomWidth = width;
obj.style.borderBottomColor =color;
obj.style.borderBottomStyle ='solid';
currentimgx.style.width=cimgoverx+"px";
currentimgx.style.height=cimgoverx+"px";
}
function outbx(obj){
obj.style.borderTopWidth = '0px';
obj.style.borderLeftWidth = '0px';
obj.style.borderRightWidth = '0px';
obj.style.borderBottomWidth = '0px';
currentimgx.style.width=cimgoutx+"px";
currentimgx.style.height=cimgoutx+"px";
}
function ifocusx(obj){
color='#FF0000';
width='3px';
obj.style.borderTopWidth = width;
obj.style.borderTopColor =color;
obj.style.borderTopStyle ='solid';
obj.style.borderLeftWidth = width;
obj.style.borderLeftColor =color;
obj.style.borderLeftStyle ='solid';
obj.style.borderRightWidth = width;
obj.style.borderRightColor =color;
obj.style.borderRightStyle ='solid';
obj.style.borderBottomWidth = width;
obj.style.borderBottomColor =color;
obj.style.borderBottomStyle ='solid';
}
function iblurx(obj){
color='#000000';
width='3px';
obj.style.borderTopWidth = width;
obj.style.borderTopColor =color;
obj.style.borderTopStyle ='solid';
obj.style.borderLeftWidth = width;
obj.style.borderLeftColor =color;
obj.style.borderLeftStyle ='solid';
obj.style.borderRightWidth = width;
obj.style.borderRightColor =color;
obj.style.borderRightStyle ='solid';
obj.style.borderBottomWidth = width;
obj.style.borderBottomColor =color;
obj.style.borderBottomStyle ='solid';
}
function cimgx(obj){
currentimgx=obj;
}
function pause(millis){
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
<p><FONT COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>
<p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
<TD>
<FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;"> 298 </font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas sadsadas </font> </FONT>
</TD>
</TR>
<tr valign="top">
<td align="center">
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
<TR align="left">
<TD>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
<TR align="left">
<TD>
<font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD align="center">TESTO</TD><td> </td><td> </td></TR><TR align="center"><TD>12/22/2010 </TD><TD>298 </TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298" style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);" style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010 </TD><TD>298 </TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298" style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);" style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</td>
</tr>
</tbody></table>
</body>
</html>
jquery 1.4.4와 jquery.ui가 있는지 확인합니다.
Javascript 터치로 쉬운 방법
$("#myButton").click(function(event) {
var cont = confirm('Continue?');
if(cont) {
// do stuff here if OK was clicked
return true;
}
// If cancel was clicked button execution will be halted.
event.preventDefault();
}
<input type="button" value="Delete" onclick="Delete(@item.id)" / >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
function Delete(id) {
if (confirm("Are you sure ?") == true) {
$.get("/Stud/StudDelete", {
id: id
}, function(res) {
if (res) {
location.reload();
}
});
}
}
</script>
언급URL : https://stackoverflow.com/questions/887029/how-to-implement-confirmation-dialog-in-jquery-ui-dialog
'programing' 카테고리의 다른 글
| SELECT FROM DUAL로 여러 행이 가능합니까? (0) | 2023.08.20 |
|---|---|
| SweetAlert2를 사용하여 탐지되지 않음(약속 없음) 취소 (0) | 2023.08.20 |
| django-el-pagination에 대해 다중 페이지화(ajax)가 작동하지 않습니다. (0) | 2023.08.20 |
| mockMvc로 응답체에서 JSON을 확인하는 방법 (0) | 2023.08.20 |
| "주문 기준(SELECT NULL)"은 무엇을 의미합니까? (0) | 2023.08.20 |