{"id":2753,"date":"2022-07-01T16:57:21","date_gmt":"2022-07-01T14:57:21","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2753"},"modified":"2022-07-01T16:57:47","modified_gmt":"2022-07-01T14:57:47","slug":"bootstrap-im-iframe-modaler-dialog-wird-am-oberen-ende-angezeigt","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2753\/bootstrap-im-iframe-modaler-dialog-wird-am-oberen-ende-angezeigt\/","title":{"rendered":"Bootstrap im iFrame: Modaler Dialog wird am oberen Ende angezeigt"},"content":{"rendered":"<p>Modale Dialoge werden in Bootstrap immer am oberen Rand des Fensters angezeigt. Dies kann zu Problemen bei Iframes f\u00fchren.<\/p>\n<p><!--more--><\/p>\n<p>Modale Bootstrap-Dialoge werden immer am oberen Rand des Fensters angezeigt. Dies kann zu Problemen f\u00fchren, wenn die Bootstrap Datei in einem Iframe angezeigt wird. In diesem Fall wird der Dialog am oberen Rand des Iframes angezeigt. Ist der Iframe l\u00e4nger bedeutet dies, dass es nicht mehr im sichtbaren Bereich angezeigt wird.<\/p>\n<p>Der folgende Code schafft Abhilfe (ben\u00f6tigt Jquery):<\/p>\n<pre>&lt;script&gt;&lt;\/script&gt;\r\n$('#id_modal').on('show.bs.modal', function (e) {\r\n  if (window.top.document.querySelector('iframe')) {\r\n      $('#id_modal').css('top', window.top.scrollY); \/\/set modal position\r\n  }\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Im Falle eines Iframes wird die Position des Dialogs ver\u00e4ndert und im sichtbaren Bereich dargestellt.<\/p>","protected":false},"excerpt":{"rendered":"<p>Modale Dialoge werden in Bootstrap immer am oberen Rand des Fensters angezeigt. Dies kann zu Problemen bei Iframes f\u00fchren.<\/p>\n","protected":false},"author":1,"featured_media":217,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[43,44],"class_list":["post-2753","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-bootstrap","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2753","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=2753"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2753\/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=2753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}