{"id":170,"date":"2015-08-10T11:12:26","date_gmt":"2015-08-10T11:12:26","guid":{"rendered":"http:\/\/wpdemos.themezaa.com\/h-code\/modal-popup\/"},"modified":"2015-08-10T11:12:26","modified_gmt":"2015-08-10T11:12:26","slug":"modal-popup","status":"publish","type":"page","link":"https:\/\/designpiraten.com\/de\/modal-popup\/","title":{"rendered":"Modal Popup"},"content":{"rendered":"<section><div class=\"container\"><div class=\"row\"><div class=\"wpb_column hcode-column-container center-col text-center vc_col-sm-10 vc_col-md-7 col-xs-mobile-fullwidth\" data-front-class=\"center-col text-center col-xs-mobile-fullwidth\"><div class=\"vc-column-innner-wrapper\"><h6 class=\"section-title no-padding margin-three-bottom black-text\">Simple Modal Popup<\/h6><\/div><\/div><div class=\"wpb_column hcode-column-container center-col text-center vc_col-sm-5 vc_col-lg-3 vc_col-md-4 col-xs-mobile-fullwidth\" data-front-class=\"center-col text-center col-xs-mobile-fullwidth\"><div class=\"vc-column-innner-wrapper\"><p class=\"text-med\" >A modal popup disables the usual ways to close popups.<\/p><a class=\"highlight-button btn btn-small no-margin-right modal-popup no-margin-bottom\" href=\"#modal-popup-1444107977\" target=\"_self\">Open Modal<\/a><div id=\"modal-popup-1444107977\" class=\"white-popup-block mfp-hide vc_col-sm-7 vc_col-lg-3 vc_col-md-6 vc_col-xs-11 center-col bg-white text-center modal-popup-main\"><span class=\"slider-subtitle5 black-text no-margin-bottom\">Modal Dialog<\/span><p class=\"margin-four\"><p class=\"margin-four\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<\/p><\/p><a class=\"highlight-button btn btn-very-small button popup-modal-dismiss no-margin\" href=\"#\">Dismiss<\/a><\/div><\/div><\/div><\/div><\/div><\/section><section style=\"background-color:#f6f6f6;\"><div class=\"container\"><div class=\"row\"><div class=\"wpb_column hcode-column-container center-col text-center vc_col-sm-10 vc_col-md-7 col-xs-mobile-fullwidth\" data-front-class=\"center-col text-center col-xs-mobile-fullwidth\"><div class=\"vc-column-innner-wrapper\"><h6 class=\"section-title no-padding margin-three-bottom black-text\">Dialog with CSS animation<\/h6><\/div><\/div><div class=\"wpb_column hcode-column-container center-col text-center vc_col-sm-5 vc_col-lg-3 vc_col-md-4 col-xs-mobile-fullwidth\" data-front-class=\"center-col text-center col-xs-mobile-fullwidth\"><div class=\"vc-column-innner-wrapper\"><p class=\"text-med\" >Animations are added with simple CSS transitions, you can make them look however you wish.<\/p><a class=\"highlight-button btn btn-small no-margin-right popup-with-zoom-anim no-margin-bottom\" href=\"#modal-popup-1444107978\" target=\"_self\">Open with fade-zoom animation<\/a><div id=\"modal-popup-1444107978\" class=\"zoom-anim-dialog mfp-hide vc_col-sm-7 vc_col-lg-3 vc_col-md-6 vc_col-xs-11 center-col bg-white text-center modal-popup-main\"><span class=\"slider-subtitle5 black-text no-margin-bottom\">Modal Dialog<\/span><p class=\"margin-four\"><p class=\"margin-four\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<\/p><\/p><a class=\"highlight-button btn btn-very-small button popup-modal-dismiss no-margin\" href=\"#\">Dismiss<\/a><\/div><\/div><\/div><\/div><\/div><\/section><section><div class=\"container\"><div class=\"row\"><div class=\"wpb_column hcode-column-container center-col text-center vc_col-sm-10 vc_col-md-7 col-xs-mobile-fullwidth\" data-front-class=\"center-col text-center col-xs-mobile-fullwidth\"><div class=\"vc-column-innner-wrapper\"><h6 class=\"section-title no-padding margin-three-bottom black-text\">Dialog with CSS animation<\/h6><\/div><\/div><div class=\"wpb_column hcode-column-container center-col text-center vc_col-sm-5 vc_col-lg-3 vc_col-md-4 col-xs-mobile-fullwidth\" data-front-class=\"center-col text-center col-xs-mobile-fullwidth\"><div class=\"vc-column-innner-wrapper\"><p class=\"text-med\" >Animations are added with simple CSS transitions, you can make them look however you wish.<\/p><a class=\"highlight-button btn btn-small no-margin-right popup-with-move-anim no-margin-bottom\" href=\"#modal-popup-1444107979\" target=\"_self\">Open with fade-slide animation<\/a><div id=\"modal-popup-1444107979\" class=\"zoom-anim-dialog mfp-hide vc_col-sm-7 vc_col-lg-3 vc_col-md-6 vc_col-xs-11 center-col bg-white text-center modal-popup-main\"><span class=\"slider-subtitle5 black-text no-margin-bottom\">Modal Dialog<\/span><p class=\"margin-four\"><p class=\"margin-four\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<\/p><\/p><a class=\"highlight-button btn btn-very-small button popup-modal-dismiss no-margin\" href=\"#\">Dismiss<\/a><\/div><\/div><\/div><\/div><\/div><\/section><section style=\"border-top: 1px solid #e5e5e5;\"><div class=\"container\"><div class=\"row\"><div class=\"wpb_column hcode-column-container center-col text-center vc_col-sm-10 vc_col-md-7 col-xs-mobile-fullwidth\" data-front-class=\"center-col text-center col-xs-mobile-fullwidth\"><div class=\"vc-column-innner-wrapper\"><h6 class=\"section-title no-padding margin-three-bottom black-text\">Ajax popup<\/h6><\/div><\/div><div class=\"wpb_column hcode-column-container center-col text-center vc_col-sm-5 vc_col-lg-3 vc_col-md-4 col-xs-mobile-fullwidth\" data-front-class=\"center-col text-center col-xs-mobile-fullwidth\"><div class=\"vc-column-innner-wrapper\"><p class=\"text-med\" >You have full control of what is displayed in popup, align it to any side via CSS, enable or disable scroll on right side of window - whatever.<\/p><a class=\"highlight-button btn btn-small no-margin-right simple-ajax-popup-align-top no-margin-bottom\" href=\"http:\/\/wpdemos.themezaa.com\/h-code\/ajax-single-project-page-1\/\" target=\"_self\">Load content via ajax<\/a><\/div><\/div><\/div><\/div><\/section>","protected":false},"excerpt":{"rendered":"<p>Simple Modal PopupA modal popup disables the usual ways to close popups.Open ModalModal DialogLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s.DismissDialog with CSS animationAnimations are added with simple CSS transitions, you can make them look however you wish.Open [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-170","page","type-page","status-publish","hentry"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false}}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Modal Popup - designpiraten.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/designpiraten.com\/modal-popup\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modal Popup - designpiraten.com\" \/>\n<meta property=\"og:url\" content=\"https:\/\/designpiraten.com\/modal-popup\/\" \/>\n<meta property=\"og:site_name\" content=\"designpiraten.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/markus.strumpel.5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/designpiraten.com\/modal-popup\/\",\"url\":\"https:\/\/designpiraten.com\/modal-popup\/\",\"name\":\"Modal Popup - designpiraten.com\",\"isPartOf\":{\"@id\":\"https:\/\/designpiraten.com\/#website\"},\"datePublished\":\"2015-08-10T11:12:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/designpiraten.com\/modal-popup\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/designpiraten.com\/modal-popup\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/designpiraten.com\/modal-popup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/designpiraten.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modal Popup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/designpiraten.com\/#website\",\"url\":\"https:\/\/designpiraten.com\/\",\"name\":\"designpiraten.com\",\"description\":\"Markus Struempel Design Branding Tibet\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/designpiraten.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Modal Popup - designpiraten.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/designpiraten.com\/modal-popup\/","og_locale":"de_DE","og_type":"article","og_title":"Modal Popup - designpiraten.com","og_url":"https:\/\/designpiraten.com\/modal-popup\/","og_site_name":"designpiraten.com","article_publisher":"https:\/\/www.facebook.com\/markus.strumpel.5","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/designpiraten.com\/modal-popup\/","url":"https:\/\/designpiraten.com\/modal-popup\/","name":"Modal Popup - designpiraten.com","isPartOf":{"@id":"https:\/\/designpiraten.com\/#website"},"datePublished":"2015-08-10T11:12:26+00:00","breadcrumb":{"@id":"https:\/\/designpiraten.com\/modal-popup\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/designpiraten.com\/modal-popup\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/designpiraten.com\/modal-popup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/designpiraten.com\/"},{"@type":"ListItem","position":2,"name":"Modal Popup"}]},{"@type":"WebSite","@id":"https:\/\/designpiraten.com\/#website","url":"https:\/\/designpiraten.com\/","name":"designpiraten.com","description":"Markus Struempel Design Branding Tibet","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/designpiraten.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/designpiraten.com\/de\/wp-json\/wp\/v2\/pages\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designpiraten.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/designpiraten.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/designpiraten.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designpiraten.com\/de\/wp-json\/wp\/v2\/comments?post=170"}],"version-history":[{"count":0,"href":"https:\/\/designpiraten.com\/de\/wp-json\/wp\/v2\/pages\/170\/revisions"}],"wp:attachment":[{"href":"https:\/\/designpiraten.com\/de\/wp-json\/wp\/v2\/media?parent=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}