Builderius modal in a card

cardWithModal.json

{"modules":{"u8488fbe2d":{"id":"u8488fbe2d","name":"HtmlElement","label":"article","settings":[{"name":"borderRadius","value":{"all":{"original":{"a1":"12","a2":"12","a3":"12","a4":"12","b1":"px","b2":"px","b3":"px","b4":"px"}}}},{"name":"border","value":{"all":{"original":{"d1":"#959595","c1":"dashed","d2":"#959595","b1":"px","c2":"dashed","d3":"#959595","b2":"px","c3":"dashed","d4":"#959595","a1":"3","b3":"px","c4":"dashed","a2":"3","b4":"px","a3":"3","a4":"3"}}}},{"name":"padding","value":{"all":{"original":{"a1":"2","a2":"2","a3":"2","a4":"2","b1":"rem","b2":"rem","b3":"rem","b4":"rem"}}}},{"name":"maxWidth","value":{"all":{"original":{"a1":"20","b1":"ch"}}}},{"name":"margin","value":{"all":{"original":{"b4":"auto","b2":"auto","a1":"2","b1":"rem","a3":"2","b3":"rem"}}}},{"name":"htmlElementTag","value":{"a1":"article"}},{"name":"isLinkWrapper","value":{"a1":false}}],"parent":""},"u75d9743bc":{"id":"u75d9743bc","name":"HtmlElement","label":"div","settings":[{"name":"gap","value":{"all":{"original":{"a1":"1","b1":"rem"}}}},{"name":"flexDirection","value":{"all":{"original":{"a1":"column"}}}},{"name":"display","value":{"all":{"original":{"a1":"flex"}}}},{"name":"htmlElementTag","value":{"a1":"div"}},{"name":"isLinkWrapper","value":{"a1":false}}],"parent":"u8488fbe2d","index":0},"u151b5dc89":{"id":"u151b5dc89","name":"Heading","label":"h3","settings":[{"name":"dataHeading","value":{"a1":"[[wp.post.title]]"}},{"name":"htmlTagHeading","value":{"a1":"h3"}}],"parent":"u75d9743bc","index":0},"u489708900":{"id":"u489708900","name":"Template","label":"Template","settings":[],"parent":"ua93a9564e","index":0},"u89d588d0f":{"id":"u89d588d0f","name":"Button","label":"Button","settings":[{"name":"zIndex","value":{"all":{"original":{"a1":"99999"}}}},{"name":"left","value":{"all":{"original":{"a1":"0","b1":"px"}}}},{"name":"top","value":{"all":{"original":{"a1":"0","b1":"px"}}}},{"name":"position","value":{"all":{"original":{"a1":"fixed"}}}},{"name":"tagClass","value":{"a1":["closeArticleModal"]}},{"name":"dataButton","value":{"a1":"Close modal"}},{"name":"htmlAttribute","value":{"i1":[{"a1":"type","b1":"button"}]}}],"parent":"u489708900","index":0},"u71ac85da9":{"id":"u71ac85da9","name":"Heading","label":"h1","settings":[{"name":"dataHeading","value":{"a1":"[[wp.post.title]]"}},{"name":"htmlTagHeading","value":{"a1":"h1"}}],"parent":"u153429a8e","index":0},"u6787f20e8":{"id":"u6787f20e8","name":"HtmlElement","label":"span","settings":[{"name":"dataHtmlElement","value":{"a1":"[[wp.post.date]]"}},{"name":"htmlElementTag","value":{"a1":"span"}},{"name":"isLinkWrapper","value":{"a1":false}}],"parent":"u75d9743bc","index":1},"ua93a9564e":{"id":"ua93a9564e","name":"Modal","label":"Modal","settings":[{"name":"padding","value":{"all":{" .builderiusModal":{"a1":"3","b1":"rem","a3":"3","b3":"rem"}}}},{"name":"backgroundColor","value":{"all":{" .builderiusModalBackdrop":{"a1":"#ffffff"}}}},{"name":"justifyContent","value":{"all":{" .builderiusModal":{"a1":"flex-start"}}}},{"name":"overflow","value":{"all":{" .builderiusModal":{"a1":"auto"}}}},{"name":"flexDirection","value":{"all":{" .builderiusModal":{"a1":"column"}}}},{"name":"display","value":{"all":{" .builderiusModal":{"a1":"flex"}}}},{"name":"htmlAttribute","value":{"i1":[{"a1":"data-open-selector","b1":".openArticleModal"},{"a1":"data-close-selector","b1":".closeArticleModal"}]}}],"parent":"u8488fbe2d","index":1},"u153429a8e":{"id":"u153429a8e","name":"HtmlElement","label":"div","settings":[{"name":"gap","value":{"all":{"original":{"a1":"2","b1":"rem"}}}},{"name":"flexDirection","value":{"all":{"original":{"a1":"column"}}}},{"name":"display","value":{"all":{"original":{"a1":"flex"}}}},{"name":"margin","value":{"all":{"original":{"b4":"auto","b2":"auto"}}}},{"name":"maxWidth","value":{"all":{"original":{"a1":"54","b1":"ch"}}}},{"name":"width","value":{"all":{"original":{"a1":"100","b1":"%"}}}},{"name":"htmlElementTag","value":{"a1":"div"}},{"name":"isLinkWrapper","value":{"a1":false}}],"parent":"u489708900","index":1},"ubc6065b1f":{"id":"ubc6065b1f","name":"HtmlElement","label":"post content","settings":[{"name":"margin","value":{"all":{" > *":{"a3":"1","b3":"rem"}}}},{"name":"dataHtmlElement","value":{"a1":"[[[wp.post.content]]]"}},{"name":"htmlElementTag","value":{"a1":"div"}},{"name":"isLinkWrapper","value":{"a1":false}}],"parent":"u153429a8e","index":1},"ub2e48d80f":{"id":"ub2e48d80f","name":"Paragraph","label":"Paragraph","settings":[{"name":"dataParagraph","value":{"a1":"[[[wp.post.excerpt]]]"}}],"parent":"u75d9743bc","index":2},"u238933dc8":{"id":"u238933dc8","name":"HtmlElement","label":"span","settings":[{"name":"dataHtmlElement","value":{"a1":"[[[wp.post.mb_field__name_of_something]]]"}},{"name":"htmlElementTag","value":{"a1":"span"}},{"name":"isLinkWrapper","value":{"a1":false}}],"parent":"u153429a8e","index":2},"ua9a930f99":{"id":"ua9a930f99","name":"Button","label":"Button","settings":[{"name":"cursor","value":{"all":{":hover":{"a1":"pointer"}}}},{"name":"dataButton","value":{"a1":"Open Modal"}},{"name":"tagClass","value":{"a1":["openArticleModal"]}},{"name":"htmlAttribute","value":{"i1":[{"a1":"type","b1":"button"}]}}],"parent":"u75d9743bc","index":3}},"indexes":{"root":["u8488fbe2d"],"u8488fbe2d":["u75d9743bc","ua93a9564e"],"u75d9743bc":["u151b5dc89","u6787f20e8","ub2e48d80f","ua9a930f99"],"ua93a9564e":["u489708900"],"u489708900":["u89d588d0f","u153429a8e"],"u153429a8e":["u71ac85da9","ubc6065b1f","u238933dc8"]},"template":{"type":"template","technology":"html","settings":[{"name":"dataVars","value":{"i1":[{"a1":"graphQLQuery","b1":"wp","c1":"query {\n    post: queried_post {\n        title: post_title\n        content: post_content\n        type: post_type\n        mb_field__name_of_something: metabox_value (field_id: \"name_of_something\")\n        date_format: option_value (name: \"date_format\")\n        datetime: post_date\n        date: expression_result (expression: \"{{date(date_format, strtotime(datetime))}}\")\n        excerpt: post_excerpt\n        mb_field__image_of_something: metabox_value (field_id: \"image_of_something\")\n        meta_field__url: meta_value (key: \"url\")\n    }\n    is_user_logged_in: php_function_output (function: \"is_user_logged_in\")\n    current_url\n    nav_menu__main_menu: nav_menu (identifier: \"name\", value: \"main_menu\") {\n        items {\n            title\n            url\n            classes\n            object_id\n            children {\n                title\n                url\n                classes\n                object_id\n            }\n        }\n    }\n}"}]}}]}}