{"id":29207,"date":"2021-06-10T18:53:00","date_gmt":"2021-06-10T15:53:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29207"},"modified":"2021-10-17T16:21:10","modified_gmt":"2021-10-17T13:21:10","slug":"sweetalert-un-hermoso-reemplazo-para-los-cuadros-de-dialogo-de-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/sweetalert-un-hermoso-reemplazo-para-los-cuadros-de-dialogo-de-javascript\/","title":{"rendered":"SweetAlert: un hermoso reemplazo para los cuadros de di\u00e1logo de JavaScript"},"content":{"rendered":"<p>JavaScript est\u00e1 incrustado en todos los navegadores. JavaScript proporciona cuadros de di\u00e1logo (alerta, confirmaci\u00f3n, aviso) que est\u00e1n disponibles en todos los navegadores principales. Cada navegador muestra estos cuadros de di\u00e1logo de forma diferente en t\u00e9rminos de interfaz de usuario.<\/p>\n<p>Al crear una aplicaci\u00f3n, nuestro enfoque principal es la experiencia del usuario. Y en alg\u00fan lugar, los cuadros de di\u00e1logo de JavaScript no brindan una buena experiencia de usuario. Esto se debe a que en cada navegador estos cuadros tienen una interfaz de usuario diferente que de alguna manera rompe la consistencia de la apariencia.<\/p>\n<p>En este art\u00edculo, discutimos <a href=\"https:\/\/sweetalert.js.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SweetAlert,<\/a> que es un hermoso reemplazo para los cuadros de di\u00e1logo de JavaScript. Aparte de estas alertas b\u00e1sicas, SweetAlert proporciona mucho m\u00e1s mensajes de error, \u00e9xito, modelos de advertencia, manejo de Ajax en ventanas emergentes, etc.<\/p>\n<h3>Cuadros de di\u00e1logo de SweetAlert<\/h3>\n<p>Mientras usamos SweetAlert tendremos control total sobre el texto y los botones de los cuadros de di\u00e1logo. Podemos cambiar el texto del encabezado, el texto del bot\u00f3n seg\u00fan nuestra conveniencia.<\/p>\n<p>A continuaci\u00f3n se muestran algunos ejemplos de cuadros de di\u00e1logo de SweetAlert.<\/p>\n<p><strong>Cuadro de di\u00e1logo de alerta<\/strong><\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70ae9734.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70ae9734.png\" alt=\"SweetAlert: un hermoso reemplazo para los cuadros de di\u00e1logo de JavaScript\" ><\/a><\/p>\n<p><strong>Confirmar cuadro de di\u00e1logo<\/strong><\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70b4612a.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70b4612a.png\" alt=\"SweetAlert: un hermoso reemplazo para los cuadros de di\u00e1logo de JavaScript\" ><\/a><\/p>\n<p><strong>Cuadro de di\u00e1logo de solicitud<\/strong><\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70baf757.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20278-6081d70baf757.png\" alt=\"SweetAlert: un hermoso reemplazo para los cuadros de di\u00e1logo de JavaScript\" ><\/a><\/p>\n<h3>C\u00f3mo utilizar SweetAlert<\/h3>\n<p>Usar SweetAlert en la aplicaci\u00f3n es un proceso sencillo. Requiere que incluyamos su archivo JS y estamos bien para usar los m\u00e9todos de la biblioteca SweetAlert.<\/p>\n<h4>Ejemplo de cuadro de alerta<\/h4>\n<pre><code>&lt;script src=\"\/\/unpkg.com\/sweetalert\/dist\/sweetalert.min.js\"&gt;&lt;\/script&gt;\n&lt;script&gt;\nswal(\"Hello world!\");\n&lt;\/script&gt;<\/code><\/pre>\n<p>Mientras usa SweetAlert, debe usar la <code>swal<\/code>funci\u00f3n para llamar a los diferentes tipos de cuadros de di\u00e1logo. El c\u00f3digo anterior mostrar\u00e1 una ventana emergente con el texto &quot;\u00a1Hola, mundo!&quot;.<\/p>\n<p>Tambi\u00e9n podemos establecer el t\u00edtulo modal y luego el texto de la siguiente manera;<\/p>\n<pre><code>swal(\"Here's the title!\", \"...and here's the text!\");<\/code><\/pre>\n<p>Si desea mostrar una ventana emergente sobre la base de la naturaleza de la operaci\u00f3n, pase el tercer argumento. El tercer argumento puede ser &quot;\u00e9xito&quot;, &quot;advertencia&quot;, &quot;error&quot;, &quot;informaci\u00f3n&quot;.<\/p>\n<pre><code>swal(\"Good job!\", \"You clicked the button!\", \"success\"); \/\/success, warning, error, info<\/code><\/pre>\n<p>Pruebe todos los valores del tercer argumento y obtendr\u00e1 una interfaz de usuario diferente en cada uno de ellos.<\/p>\n<h4>Confirmar ejemplo de cuadro<\/h4>\n<p>Para utilizar el cuadro de confirmaci\u00f3n de SweetAlert, utilice el siguiente c\u00f3digo:<\/p>\n<pre><code>swal({\n\u00a0\u00a0\u00a0\u00a0title: \"Are you sure?\",\n\u00a0\u00a0\u00a0\u00a0text: \"Once deleted, you will not be able to recover this record!\",\n\u00a0\u00a0\u00a0\u00a0icon: \"warning\",\n\u00a0\u00a0\u00a0\u00a0buttons: true,\n\u00a0\u00a0\u00a0\u00a0dangerMode: true,\n})\n.then((willDelete) =&gt; {\n\u00a0\u00a0\u00a0\u00a0if (willDelete) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Poof! Your record has been deleted!\", {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon: \"success\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Your imaginary file is safe!\");\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n<p>A veces, necesitamos enviar solicitudes AJAX con el cuadro de di\u00e1logo de confirmaci\u00f3n. En ese caso, enviamos una solicitud AJAX despu\u00e9s de hacer clic en el bot\u00f3n confirmar y luego manejamos la respuesta de la siguiente manera.<\/p>\n<pre><code>swal({\n\u00a0\u00a0\u00a0\u00a0title: \"Are you sure?\",\n\u00a0\u00a0\u00a0\u00a0text: \"Once deleted, you will not be able to recover this record!\",\n\u00a0\u00a0\u00a0\u00a0icon: \"warning\",\n\u00a0\u00a0\u00a0\u00a0buttons: true,\n\u00a0\u00a0\u00a0\u00a0dangerMode: true,\n})\n.then((willDelete) =&gt; {\n\u00a0\u00a0\u00a0\u00a0if (willDelete) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0jQuery.get('ajax.php', function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == true) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Poof! Your record has been deleted!\", {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon: \"success\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Your imaginary file is safe!\");\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n<h4>Ejemplo de cuadro de aviso<\/h4>\n<p>Rara vez se utiliza un cuadro de di\u00e1logo emergente en el sitio web. Sin embargo, si alguien quiere usarlo con SwetAlert, use el siguiente c\u00f3digo.<\/p>\n<pre><code>swal(\"Write something here:\", {\n\u00a0\u00a0\u00a0\u00a0content: \"input\",\n})\n.then((value) =&gt; {\n\u00a0\u00a0\u00a0\u00a0swal(`You typed: ${value}`);\n});<\/code><\/pre>\n<p>Estos son conceptos b\u00e1sicos sobre la biblioteca SweetAlert. Puede explorar m\u00e1s en la <a href=\"https:\/\/sweetalert.js.org\/docs\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documentaci\u00f3n de<\/a> SweetAlert .<\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/implemente-un-sitio-web-estatico-en-firebase-hosting-de-forma-gratuita\/\" title=\"Implemente un sitio web est\u00e1tico en Firebase Hosting de forma gratuita\">Implemente un sitio web est\u00e1tico en Firebase Hosting de forma gratuita<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/validar-google-recaptcha-usando-javascript\/\" title=\"Validar Google reCAPTCHA usando JavaScript\">Validar Google reCAPTCHA usando JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/validacion-de-formularios-html-con-perejil\/\" title=\"Validaci\u00f3n de formularios HTML con perejil\">Validaci\u00f3n de formularios HTML con perejil<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SweetAlert es un hermoso reemplazo para los cuadros de di\u00e1logo de JavaScript. Los cuadros de di\u00e1logo creados con SweetAlert agregan una mejor experiencia de usuario que<\/p>\n","protected":false},"author":1,"featured_media":21636,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[243],"tags":[849],"class_list":["post-29207","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/29207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=29207"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/29207\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/21636"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=29207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=29207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=29207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}