{"id":845,"date":"2020-04-22T15:55:56","date_gmt":"2020-04-22T13:55:56","guid":{"rendered":"https:\/\/ekiwi.de\/?p=845"},"modified":"2022-02-15T16:32:32","modified_gmt":"2022-02-15T15:32:32","slug":"sweetalert2-schoene-dialoge-in-javascript","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/845\/sweetalert2-schoene-dialoge-in-javascript\/","title":{"rendered":"SweetAlert2 &#8211; sch\u00f6ne Dialoge in JavaScript"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/845\/sweetalert2-schoene-dialoge-in-javascript\/#Fazit\" >Fazit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/845\/sweetalert2-schoene-dialoge-in-javascript\/#Beispiel\" >Beispiel<\/a><\/li><\/ul><\/nav><\/div>\n<p>Die Standarddialoge der alert-Funktion von Java-Script sind alles andere als sch\u00f6n. Als einfach zu nutzende Alternative bietet sich &#8222;SweetAlert2&#8220; an.<\/p>\n<p><!--more--><\/p>\n<p>Mit <a href=\"https:\/\/sweetalert2.github.io\/\" rel=\"noopener noreferrer\" target=\"_blank\">SweetAlert2<\/a> lassen sich Popup-Meldungen in Java-Script leicht realisieren. Die sehen schick aus, lassen sich konfigurieren, z.B. Design, Texte, Position und die Einbindung geht schnell von der Hand. Der Dialog erscheint mit schicker Animation und blendet den Hintergrund zudem dezent aus.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/04\/swal2.jpg\" alt=\"\" width=\"529\" height=\"349\" class=\"aligncenter size-full wp-image-846\" srcset=\"\/wp-content\/uploads\/2020\/04\/swal2.jpg 529w, \/wp-content\/uploads\/2020\/04\/swal2-300x198.jpg 300w, \/wp-content\/uploads\/2020\/04\/swal2-120x80.jpg 120w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/p>\n<p>Zuerst binden wir die Java-Script Bibliothek ein:<\/p>\n<pre>&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@9&quot;&gt;&lt;\/script&gt;<\/pre>\n<p>Anschlie\u00dfend k\u00f6nnen wir im Code den Dialog aufrufen:<\/p>\n<pre>\r\nSwal.fire({\r\n    title: 'Fehler!',\r\n    text: 'es ist ein Fehler aufgetreten',\r\n    icon: 'error',\r\n    confirmButtonText: 'Nicht sch\u00f6n',\r\n    position: 'top'\r\n})\r\n<\/pre>\n<p>Hier sieht man bereits die Konfigurationsm\u00f6glichkeiten. Die Homepage bietet hier <a href=\"https:\/\/sweetalert2.github.io\/#configuration\" rel=\"noopener noreferrer\" target=\"_blank\">weitere Informationen<\/a>. So lassen sich Text, Icon, Button und auch die Position beeinflussen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Deutlich besser als die klassischen Meldungen die Java-Script im Browser anzeigen lassen kann. Diese haben zudem noch den Nachteil, dass der Browser diese bei wiederholter Anzeige ignorieren kann.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Beispiel\"><\/span>Beispiel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/ekiwi.de\/tryit\/?id=114\" target=\"_blank\" rel=\"noopener noreferrer\">Das Beispiel kann hier ausprobiert werden<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Die Standarddialoge der alert-Funktion von Java-Script sind alles andere als sch\u00f6n. Als einfach zu nutzende Alternative bietet sich &#8222;SweetAlert2&#8220; an.<\/p>\n","protected":false},"author":1,"featured_media":217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[44],"class_list":["post-845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=845"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/845\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/217"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}