{"id":590,"date":"2012-09-28T09:49:22","date_gmt":"2012-09-28T09:49:22","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=590"},"modified":"2022-02-17T07:14:47","modified_gmt":"2022-02-17T07:14:47","slug":"yes-no-box","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/jquery\/dialogs\/yes-no-box","title":{"rendered":"Yes Cancel Dialog Box"},"content":{"rendered":"<h4>\nResources<br \/>\n<\/h4>\n<p>\n<a href=\"http:\/\/jqueryui.com\/demos\/dialog\/#modal-confirmation\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/jqueryui.com\/demos\/dialog\/#modal-confirmation<\/a>\n<\/p>\n<h4>\nA Nice And Simple Dialog Box<br \/>\n<\/h4>\n<p>\nAdd the following to your HTML page.\n<\/p>\n<h5>\nAt the top somewhere<br \/>\n<\/h5>\n<p>\n(Doesn&#39;t have to be in the head)\n<\/p>\n<pre>\r\n<code>\r\n&lt;!-- JQUERY UI --&gt;\r\n&lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.9\/themes\/smoothness\/jquery-ui.css&quot; type=&quot;text\/css&quot; media=&quot;all&quot; \/&gt;\r\n&lt;script src=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.9\/jquery-ui.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\r\n\r\n&lt;!-- div element used for confirmation and other dialogs --&gt;\r\n&lt;div id=&quot;dialog-confirm&quot; style=&quot;display:none;&quot;&gt;&lt;\/div&gt;\r\n&lt;!-- --&gt;\r\n<\/code><\/pre>\n<h5>\nThe function that will be called<br \/>\n<\/h5>\n<pre>\r\n<code>\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\t\/\/----- MY ARE YOU SURE DIALOG -----\r\n\t$(&quot;.my_are_you_sure_dialog&quot;).live(&#39;click&#39;, function(e){\r\n\t\te.preventDefault();\r\n\t\t\r\n\t\t\/\/----- OPTIONAL GET SPECIAL VALUES INCLUDED IN THE LINK -----\r\n\t\tvar variable1 = $(this).attr(&quot;some_variable&quot;);\r\n\t\t\r\n\t\t$(&quot;#dialog-confirm&quot;).html(&quot;&lt;p&gt;&quot; + $(this).attr(&quot;message&quot;) + &quot;&lt;\/p&gt;&quot;);\r\n\t\t\r\n\t\t$( &quot;#dialog-confirm&quot; ).dialog(\r\n\t\t{\r\n\t\t\tresizable: false,\r\n\t\t\tmodal: true,\r\n\t\t\tbuttons:\r\n\t\t\t{\r\n\t\t\t\t&quot;Yes&quot;: function()\r\n\t\t\t\t{\r\n\t\t\t\t\t\/\/----- YES -----\r\n\t\t\t\t\t$( this ).dialog( &quot;close&quot; );\r\n\t\t\t\t\twindow.location = &quot;http:\/\/www.mydomain.com&quot;;      \/\/ &lt;&lt;&lt; Set this to the target URL for the action (e.g. maybe this page with arguments after the URL?)\r\n\t\t\t\t},\r\n\t\t\t\tCancel: function()\r\n\t\t\t\t{\r\n\t\t\t\t\t\/\/----- CANCEL -----\r\n\t\t\t\t\t$( this ).dialog( &quot;close&quot; );\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\ttitle: $(this).attr(&quot;title&quot;)\r\n\t\t});\r\n\t\treturn false;\r\n\t});\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<h5>\n&nbsp;<br \/>\n<\/h5>\n<h5>\nThe Link, which contains the dialog message to be displayed and optionally values to pass<br \/>\n<\/h5>\n<pre>\r\n<code>\r\n&lt;a href=&quot;javascript:void(0)&quot; class=&quot;my_are_you_sure_dialog&quot; title=&quot;Are you sure&quot;  message=&quot;Do you want to do this?&quot; some_variable=&quot;some_value&quot;&gt;CLICK HERE&lt;\/a&gt;\r\n&lt;!-- href=&quot;javascript:void(0)&quot; stops the link doing anything if javascript isn&#39;t available --&gt;\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Resources http:\/\/jqueryui.com\/demos\/dialog\/#modal-confirmation A Nice And Simple Dialog Box Add the following to your HTML page. At the top somewhere (Doesn&#39;t have to be in the head) &lt;!&#8211; JQUERY UI &#8211;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.9\/themes\/smoothness\/jquery-ui.css&quot; type=&quot;text\/css&quot; media=&quot;all&quot; \/&gt; &lt;script src=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.9\/jquery-ui.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt; &lt;!&#8211; div element used for confirmation and other dialogs &#8211;&gt; &lt;div id=&quot;dialog-confirm&quot; style=&quot;display:none;&quot;&gt;&lt;\/div&gt; &lt;!&#8211; &#8211;&gt; The [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72],"tags":[],"class_list":["post-590","post","type-post","status-publish","format-standard","hentry","category-dialogs"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=590"}],"version-history":[{"count":13,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/590\/revisions"}],"predecessor-version":[{"id":3220,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/590\/revisions\/3220"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}