{"id":1308,"date":"2022-05-03T15:47:58","date_gmt":"2022-05-03T13:47:58","guid":{"rendered":"https:\/\/cms-test.zdv.uni-mainz.de\/demo-module\/?page_id=1308"},"modified":"2026-03-09T11:41:33","modified_gmt":"2026-03-09T10:41:33","slug":"modal","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/modal\/","title":{"rendered":"Modal"},"content":{"rendered":"<jgu-base-pageheader react-props=\"{\n    &quot;items&quot;: [\n        {\n            &quot;box&quot;: {\n                &quot;index&quot;: &quot;&quot;,\n                &quot;title&quot;: &quot;Modal \\\/ Info Popup&quot;,\n                &quot;link&quot;: {\n                    &quot;url&quot;: &quot;&quot;,\n                    &quot;title&quot;: &quot;learn more&quot;\n                }\n            },\n            &quot;color&quot;: &quot;default&quot;,\n            &quot;image&quot;: {\n                &quot;url&quot;: &quot;&quot;\n            },\n            &quot;imgCredit&quot;: &quot;&quot;,\n            &quot;useVideo&quot;: false,\n            &quot;video&quot;: false\n        }\n    ],\n    &quot;type&quot;: &quot;border&quot;,\n    &quot;align&quot;: &quot;full&quot;,\n    &quot;quicklinks&quot;: {\n        &quot;show&quot;: false,\n        &quot;selects&quot;: []\n    },\n    &quot;useBreadcrumb&quot;: false\n}\">\n<\/jgu-base-pageheader>\n\n\n<p class=\"has-big-font-size\">Der \u201eModaler Dialog\u201c Block versteckt Inhalte hinter einem Button oder <a data-info-popup-headline=\"Wozu braucht es die \u00dcberschrift?\" data-info-popup-body=\"Das Reh springt hoch,\ndas Reh springt weit,\nwarum auch nicht,\nes hat ja Zeit.\" data-info-popup-read-more-link=\"\" class=\"jgu-with-info-popup\">einem Link<\/a>. Dabei wird die Seite nicht verlassen, sondern es wird quasi ein neues Fenster ge\u00f6ffnet. Dies Element bitte nur f\u00fcr einfache Inhalte verwenden. Keine geschachtelten Strukturen einbauen! Durch das Fenster-im-Fenster kann es zu Bedienproblemen kommen!<\/p>\n\n\n\n<p class=\"has-big-font-size\">Sie sollten nicht MEHR Inhalt im Modal haben, als auf EINEM Bildschirm angezeigt wird.<br>Denn sonst scrollt der Browser im Hauptfenster.<br>\u200b\u200b\u200b\u200b\u200b\u200b\u200bUnd NICHT im Modal.<\/p>\n\n\n<jgu-base-modal react-props=\"{&quot;text&quot;:&quot;Modal mit Text&quot;,&quot;buttonStyling&quot;:&quot;primary&quot;,&quot;children&quot;:&quot;\\n&lt;jgu-base-image react-props=\\&quot;{\\n    &amp;quot;image&amp;quot;: {\\n        &amp;quot;url&amp;quot;: null,\\n        &amp;quot;id&amp;quot;: 4368\\n    },\\n    &amp;quot;align&amp;quot;: &amp;quot;&amp;quot;,\\n    &amp;quot;hasLightbox&amp;quot;: false,\\n    &amp;quot;caption&amp;quot;: &amp;quot;&amp;quot;,\\n    &amp;quot;imgWidth&amp;quot;: 0,\\n    &amp;quot;link&amp;quot;: {\\n        &amp;quot;url&amp;quot;: &amp;quot;&amp;quot;,\\n        &amp;quot;target&amp;quot;: &amp;quot;&amp;quot;,\\n        &amp;quot;rel&amp;quot;: &amp;quot;&amp;quot;\\n    }\\n}\\&quot; class=\\&quot;align-\\&quot;&gt;\\n    \\n&lt;\\\/jgu-base-image&gt;\\n\\n\\n&lt;p class=\\&quot;has-big-font-size\\&quot;&gt;Man kann die Info-Popup sogar schachteln! Bei Klick auf &lt;a data-info-popup-body=\\&quot;Ich schaudere bei diesem Verstecken von Inhalten. Das sind Funktionen f\\u00fcr ein Exit Game :-)\\&quot; data-info-popup-headline=\\&quot;omg ein infopopup im infopopup\\&quot; data-info-popup-read-more-link=\\&quot;\\&quot; class=\\&quot;jgu-with-info-popup\\&quot;&gt;Button&lt;\\\/a&gt; sieht man den inneren Popup. Hier sollte am besten nur noch einfacher Text stehen. M\\u00f6glichst nicht zu viel. &lt;\\\/p&gt;\\n\\n&quot;}\">\n    \n<jgu-base-image react-props=\"{\n    &quot;image&quot;: {\n        &quot;url&quot;: null,\n        &quot;id&quot;: 4368\n    },\n    &quot;align&quot;: &quot;&quot;,\n    &quot;hasLightbox&quot;: false,\n    &quot;caption&quot;: &quot;&quot;,\n    &quot;imgWidth&quot;: 0,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;target&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    }\n}\" class=\"align-\">\n    \n<\/jgu-base-image>\n\n\n<p class=\"has-big-font-size\">Man kann die Info-Popup sogar schachteln! Bei Klick auf <a data-info-popup-body=\"Ich schaudere bei diesem Verstecken von Inhalten. Das sind Funktionen f\u00fcr ein Exit Game :-)\" data-info-popup-headline=\"omg ein infopopup im infopopup\" data-info-popup-read-more-link=\"\" class=\"jgu-with-info-popup\">Button<\/a> sieht man den inneren Popup. Hier sollte am besten nur noch einfacher Text stehen. M\u00f6glichst nicht zu viel. <\/p>\n\n\n<\/jgu-base-modal>\n\n<jgu-base-modal react-props=\"{&quot;text&quot;:&quot;Modal mit Akkordeon&quot;,&quot;buttonStyling&quot;:&quot;default&quot;,&quot;children&quot;:&quot;\\n&lt;jgu-base-heading react-props=\\&quot;{\\n    &amp;quot;tags&amp;quot;: {\\n        &amp;quot;htmlTag&amp;quot;: &amp;quot;h2&amp;quot;,\\n        &amp;quot;classTag&amp;quot;: &amp;quot;&amp;quot;,\\n        &amp;quot;tag&amp;quot;: &amp;quot;h2&amp;quot;\\n    },\\n    &amp;quot;heading&amp;quot;: &amp;quot;Accordion in Modal&amp;quot;,\\n    &amp;quot;textAlign&amp;quot;: &amp;quot;left&amp;quot;,\\n    &amp;quot;anchor&amp;quot;: &amp;quot;&amp;quot;,\\n    &amp;quot;index&amp;quot;: &amp;quot;&amp;quot;,\\n    &amp;quot;color&amp;quot;: &amp;quot;red&amp;quot;\\n}\\&quot;&gt;&lt;\\\/jgu-base-heading&gt;\\n\\n\\n&lt;jgu-base-accordion react-props=\\&quot;{&amp;quot;selected&amp;quot;:1,&amp;quot;enableSearch&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;wide&amp;quot;,&amp;quot;hasAllOpenButton&amp;quot;:true,&amp;quot;onlyOne&amp;quot;:false,&amp;quot;initAllClosed&amp;quot;:true}\\&quot;&gt;\\n    \\n&lt;jgu-base-accordionitem react-props=\\&quot;{&amp;quot;title&amp;quot;:&amp;quot;Lorem ipsum&amp;quot;,&amp;quot;init&amp;quot;:false,&amp;quot;slug&amp;quot;:&amp;quot;lorem-ipsum&amp;quot;,&amp;quot;align&amp;quot;:&amp;quot;wide&amp;quot;,&amp;quot;customSlug&amp;quot;:false}\\&quot;&gt;\\n    \\n\\n&lt;p class=\\&quot;has-big-font-size\\&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;\\\/p&gt;\\n\\n\\n&lt;\\\/jgu-base-accordionitem&gt;\\n\\n&lt;jgu-base-accordionitem react-props=\\&quot;{&amp;quot;title&amp;quot;:&amp;quot;Duis autem vel&amp;quot;,&amp;quot;init&amp;quot;:false,&amp;quot;slug&amp;quot;:&amp;quot;duis-autem-vel&amp;quot;,&amp;quot;align&amp;quot;:&amp;quot;wide&amp;quot;,&amp;quot;customSlug&amp;quot;:false}\\&quot;&gt;\\n    \\n\\n&lt;p class=\\&quot;has-big-font-size\\&quot;&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio\\ndignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;\\\/p&gt;\\n\\n\\n&lt;\\\/jgu-base-accordionitem&gt;\\n\\n&lt;\\\/jgu-base-accordion&gt;\\n\\n&quot;}\">\n    \n<jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Accordion in Modal&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n<jgu-base-accordion react-props=\"{&quot;selected&quot;:1,&quot;enableSearch&quot;:true,&quot;align&quot;:&quot;wide&quot;,&quot;hasAllOpenButton&quot;:true,&quot;onlyOne&quot;:false,&quot;initAllClosed&quot;:true}\">\n    \n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Lorem ipsum&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;lorem-ipsum&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Duis autem vel&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;duis-autem-vel&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio\ndignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\n\n\n<\/jgu-base-modal>\n\n\n<p class=\"has-big-font-size\"><a data-info-popup-body=\"\u2022      Bachelor of Arts American Studies, Kernfach\n\u2022\tBachelor of Arts American Studies, Beifach\n\u2022\tBachelor of Arts English Literature and Culture, Kernfach\n\u2022\tBachelor of Arts English Literature and Culture, Beifach\n \n\u2022\tBachelor of Education Englisch, 1. oder 2. Fachwissenschaft\n\n\u2022\tBachelor of Arts Mainz-Dijon American Studies, Kernfach\n\u2022      Bachelor of Education Mainz-Dijon Englisch, 1. oder 2. Fach\" data-info-popup-headline=\"Infopopup\" class=\"jgu-with-info-popup\">Modal LinkText = Info-Popup<\/a><\/p>\n\n\n\n<p class=\"has-big-font-size\">SEO: Sollten sie die Inhalte im Modal wichtig finden und diese auch suchbar sein, verstecken Sie sie nicht im Modal auch noch im Akkordeon! <\/p>\n    <div style=\"display: none\">\n        \n    <\/div>","protected":false},"excerpt":{"rendered":"<p>Der \u201eModaler Dialog\u201c Block versteckt Inhalte hinter einem Button oder einem Link. Dabei wird die Seite nicht verlassen, sondern es wird quasi ein neues Fenster ge\u00f6ffnet. Dies Element bitte nur f\u00fcr einfache Inhalte verwenden. Keine geschachtelten Strukturen einbauen! Durch das Fenster-im-Fenster kann es zu Bedienproblemen kommen! Sie sollten nicht MEHR Inhalt im Modal haben, als &hellip; <a href=\"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/modal\/\">Weiter lesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-1308","page","type-page","status-publish","hentry"],"content_raw":"<!-- wp:jgu\/pageheader {\"items\":[{\"box\":{\"index\":\"\",\"title\":\"Modal \/ Info Popup\",\"link\":{\"url\":\"\",\"title\":\"learn more\"}},\"color\":\"default\",\"image\":{\"url\":\"\"},\"imgCredit\":\"\",\"useVideo\":false,\"video\":false}],\"type\":\"border\"} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Der \u201eModaler Dialog\u201c Block versteckt Inhalte hinter einem Button oder <a data-info-popup-headline=\"Wozu braucht es die \u00dcberschrift?\" data-info-popup-body=\"Das Reh springt hoch,\ndas Reh springt weit,\nwarum auch nicht,\nes hat ja Zeit.\" data-info-popup-read-more-link=\"\" class=\"jgu-with-info-popup\">einem Link<\/a>. Dabei wird die Seite nicht verlassen, sondern es wird quasi ein neues Fenster ge\u00f6ffnet. Dies Element bitte nur f\u00fcr einfache Inhalte verwenden. Keine geschachtelten Strukturen einbauen! Durch das Fenster-im-Fenster kann es zu Bedienproblemen kommen!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Sie sollten nicht MEHR Inhalt im Modal haben, als auf EINEM Bildschirm angezeigt wird.<br>Denn sonst scrollt der Browser im Hauptfenster.<br>\u200b\u200b\u200b\u200b\u200b\u200b\u200bUnd NICHT im Modal.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/modal {\"text\":\"Modal mit Text\"} -->\n<!-- wp:jgu\/image {\"image\":{\"url\":null,\"id\":4368}} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Man kann die Info-Popup sogar schachteln! Bei Klick auf <a data-info-popup-body=\"Ich schaudere bei diesem Verstecken von Inhalten. Das sind Funktionen f\u00fcr ein Exit Game :-)\" data-info-popup-headline=\"omg ein infopopup im infopopup\" data-info-popup-read-more-link=\"\" class=\"jgu-with-info-popup\">Button<\/a> sieht man den inneren Popup. Hier sollte am besten nur noch einfacher Text stehen. M\u00f6glichst nicht zu viel. <\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/modal -->\n\n<!-- wp:jgu\/modal {\"text\":\"Modal mit Akkordeon\",\"buttonStyling\":\"default\"} -->\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Accordion in Modal\"} \/-->\n\n<!-- wp:jgu\/accordion {\"selected\":1,\"enableSearch\":true} -->\n<!-- wp:jgu\/accordion-item {\"title\":\"Lorem ipsum\",\"init\":false,\"slug\":\"lorem-ipsum\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Duis autem vel\",\"init\":false,\"slug\":\"duis-autem-vel\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio\ndignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n<!-- \/wp:jgu\/accordion -->\n<!-- \/wp:jgu\/modal -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><a data-info-popup-body=\"\u2022      Bachelor of Arts American Studies, Kernfach\n\u2022\tBachelor of Arts American Studies, Beifach\n\u2022\tBachelor of Arts English Literature and Culture, Kernfach\n\u2022\tBachelor of Arts English Literature and Culture, Beifach\n \n\u2022\tBachelor of Education Englisch, 1. oder 2. Fachwissenschaft\n\n\u2022\tBachelor of Arts Mainz-Dijon American Studies, Kernfach\n\u2022      Bachelor of Education Mainz-Dijon Englisch, 1. oder 2. Fach\" data-info-popup-headline=\"Infopopup\" class=\"jgu-with-info-popup\">Modal LinkText = Info-Popup<\/a><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">SEO: Sollten sie die Inhalte im Modal wichtig finden und diese auch suchbar sein, verstecken Sie sie nicht im Modal auch noch im Akkordeon! <\/p>\n<!-- \/wp:paragraph -->","_links":{"self":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/1308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/comments?post=1308"}],"version-history":[{"count":12,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/1308\/revisions"}],"predecessor-version":[{"id":118904,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/1308\/revisions\/118904"}],"wp:attachment":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/media?parent=1308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/categories?post=1308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/tags?post=1308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}