{"id":2010,"date":"2016-01-08T13:52:43","date_gmt":"2016-01-08T13:52:43","guid":{"rendered":"http:\/\/tn.joomexp.com\/wordpress\/wp-celsius\/?page_id=2010"},"modified":"2016-01-08T13:52:43","modified_gmt":"2016-01-08T13:52:43","slug":"modal-box","status":"publish","type":"page","link":"https:\/\/demo.exptheme.com\/celsius\/modal-box\/","title":{"rendered":"Modal Box"},"content":{"rendered":"

[vc_row animation=”” panel_style=”” css=”.vc_custom_1455679529447{margin-bottom: 50px !important;}”][vc_column][vc_custom_heading text=”MODAL BOX” font_container=”tag:h2″ use_theme_fonts=”yes” letter_spacing=” 1px” layout_style=”uk-module-title-alt” align=”wp-celsius-heading-left” animation=”” css=”.vc_custom_1455679516617{margin-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1452266722085{margin-bottom: 60px !important;}”]Use the uk-modal<\/code> class to show a popup box with overlay. The uk-modal<\/code> class can also be linked with these module positions: modal-a<\/code>, modal-b<\/code> and modal-c<\/code>. By using one of these positions as your target<\/code>, the modal box will show a popup of the modules that have be placed in these positions and assigned to the corresponding menu.[\/vc_column_text][vc_column_text css=”.vc_custom_1452266796260{margin-bottom: 60px !important;}”]<\/p>\n

\n\n\n\n\n\n\n\n
target<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
modal-a<\/code><\/td>\nshow modal box for modules in modal-a position<\/td>\n<\/tr>\n
modal-b<\/code><\/td>\nshow modal box for modules in modal-b position<\/td>\n<\/tr>\n
modal-c<\/code><\/td>\nshow modal box for modules in modal-c position<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

[\/vc_column_text][vc_column_text css=”.vc_custom_1453791371186{margin-bottom: 45px !important;}”]For each module linked to modal-a<\/code>, modal-b<\/code> or modal-c<\/code>, you can use Module Class Suffix to style it just like a normal module. The target<\/code> parameter can also be the id of a content section.[\/vc_column_text][vc_custom_heading text=”Size modifier” font_container=”tag:h3″ use_theme_fonts=”yes” letter_spacing=” 1px” layout_style=”uk-module-title” align=”wp-gaucho-heading-left” animation=””][vc_column_text css=”.vc_custom_1452266903563{margin-bottom: 45px !important;}”]To adjust the size (width) of the modal box, add uk-modal-dialog-small<\/code> or uk-modal-dialog-large<\/code> to the Module Class of the module.[\/vc_column_text][vc_custom_heading text=”TRIGGER A MODAL BOX FROM LINK” font_container=”tag:h3″ use_theme_fonts=”yes” letter_spacing=” 1px” layout_style=”uk-module-title” align=”wp-celsius-heading-left” animation=””][vc_raw_html css=”.vc_custom_1452267033543{margin-top: 30px !important;margin-bottom: 65px !important;}”]JTNDYSUyMGNsYXNzJTNEJTIydWstbWFyZ2luLXNtYWxsLXJpZ2h0JTIyJTIwaHJlZiUzRCUyMiUyM21vZGFsLWElMjIlMjBkYXRhLXVrLW1vZGFsJTNEJTIyJTIyJTNFbW9kYWwtYSUzQyUyRmElM0UlMEElM0NhJTIwY2xhc3MlM0QlMjJ1ay1tYXJnaW4tc21hbGwtcmlnaHQlMjIlMjBocmVmJTNEJTIyJTIzbW9kYWwtYiUyMiUyMGRhdGEtdWstbW9kYWwlM0QlMjIlMjIlM0Vtb2RhbC1iJTNDJTJGYSUzRSUwQSUzQ2ElMjBjbGFzcyUzRCUyMnVrLW1hcmdpbi1zbWFsbC1yaWdodCUyMiUyMGhyZWYlM0QlMjIlMjNtb2RhbC1jJTIyJTIwZGF0YS11ay1tb2RhbCUzRCUyMiUyMiUzRW1vZGFsLWMlM0MlMkZhJTNF[\/vc_raw_html][vc_custom_heading text=”TOGGLE MODAL BOX FROM BUTTONS” font_container=”tag:h3″ use_theme_fonts=”yes” letter_spacing=” 1px” layout_style=”uk-module-title” align=”wp-celsius-heading-left” animation=”” css=”.vc_custom_1453791527728{margin-bottom: 40px !important;}”][vc_btn title=”Modal-a” style=” celsius-button-default” size=” ” css_animation=”” target=” _blank” modal=”yes” link=”url:%23modal-a||” css=”.vc_custom_1452267042853{margin-top: 5px !important;margin-right: 5px !important;}”][vc_btn title=”Modal-b” style=” celsius-button-default” size=” ” css_animation=”” target=” _blank” modal=”yes” link=”url:%23modal-b||” css=”.vc_custom_1452267049724{margin-top: 5px !important;margin-right: 5px !important;}”][vc_btn title=”Modal-c” style=” celsius-button-default” size=” ” css_animation=”” target=” _blank” modal=”yes” link=”url:%23modal-c||” css=”.vc_custom_1452267056251{margin-top: 5px !important;}”][vc_custom_heading text=”TOGGLE MODAL BOX FOR INLINE CONTENT” font_container=”tag:h3″ use_theme_fonts=”yes” letter_spacing=” 1px” layout_style=”uk-module-title” align=”wp-gaucho-heading-left” animation=”” css=”.vc_custom_1452267084802{margin-top: 20px !important;}”][vc_column_text css=”.vc_custom_1452267113210{margin-bottom: 30px !important;}”]The uk-modal<\/code> class can also be used for inline content by using the following sytnax:[\/vc_column_text][vc_btn title=”Popup content” style=” celsius-button-default” size=” ” css_animation=”” target=” _blank” modal=”yes” link=”url:%23mycontent||” css=”.vc_custom_1452267157459{margin-bottom: 0px !important;}”][vc_raw_html]JTNDZGl2JTIwaWQlM0QlMjJtb2RhbC1hJTIyJTIwY2xhc3MlM0QlMjJ1ay1tb2RhbCUyMCUyMiUyMGFyaWEtaGlkZGVuJTNEJTIyZmFsc2UlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMnVrLW1vZGFsLWRpYWxvZyUyMHVrLXBhbmVsLWJveCUyMHVrLW1vZGFsLWRpYWxvZy1zbWFsbCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMnVrLW1vZGFsLWNsb3NlJTIwdWstY2xvc2UlMjIlM0UlM0MlMkZhJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDaDMlMjBjbGFzcyUzRCUyMnVrLXBhbmVsLXRpdGxlJTIyJTNFbW9kYWwtYSUyMHBvc2l0aW9uJTNDJTJGaDMlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTIwY2xhc3MlM0QlMjJjZWxzaXVzLWJsb2NrLWljb24lMjB1ay1hbGlnbi1sZWZ0JTIwZmElMjBmYS1sZWFmJTIyJTNFJTNDJTJGc3BhbiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ3AlM0VEbyUyMG5vdCUyMGR3ZWxsJTIwaW4lMjB0aGUlMjBwYXN0JTJDJTIwZG8lMjBub3QlMjBkcmVhbSUyMG9mJTIwdGhlJTIwZnV0dXJlJTJDJTIwY29uY2VudHJhdGUlMjB0aGUlMjBtaW5kJTIwb24lMjB0aGUlMjBwcmVzZW50JTIwbW9tZW50LiUyMEJlbGlldmUlMjBpbiUyMHlvdXJzZWxmJTIxJTIwSGF2ZSUyMGZhaXRoJTIwaW4lMjB5b3VyJTIwYWJpbGl0aWVzLiUyME1vZHVsZSUyMENsYXNzJTIwJTNDY29kZSUzRXVrLW1vZGFsLWRpYWxvZy1zbWFsbCUzQyUyRmNvZGUlM0UlM0MlMkZwJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTNDZGl2JTIwaWQlM0QlMjJtb2RhbC1iJTIyJTIwY2xhc3MlM0QlMjJ1ay1tb2RhbCUyMiUyMGFyaWEtaGlkZGVuJTNEJTIyZmFsc2UlMjIlMjAlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMnVrLW1vZGFsLWRpYWxvZyUyMHVrLXBhbmVsLWJveCUyMHVrLW1vZGFsLWRpYWxvZy1sYXJnZSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMnVrLW1vZGFsLWNsb3NlJTIwdWstY2xvc2UlMjIlM0UlM0MlMkZhJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDaDMlMjBjbGFzcyUzRCUyMnVrLXBhbmVsLXRpdGxlJTIyJTNFbW9kYWwtYiUyMHBvc2l0aW9uJTNDJTJGaDMlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTIwY2xhc3MlM0QlMjJjZWxzaXVzLWJsb2NrLWljb24lMjB1ay1hbGlnbi1sZWZ0JTIwZmElMjBmYS1jb2clMjIlM0UlM0MlMkZzcGFuJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDcCUzRURvJTIwbm90JTIwZHdlbGwlMjBpbiUyMHRoZSUyMHBhc3QlMkMlMjBkbyUyMG5vdCUyMGRyZWFtJTIwb2YlMjB0aGUlMjBmdXR1cmUlMkMlMjBjb25jZW50cmF0ZSUyMHRoZSUyMG1pbmQlMjBvbiUyMHRoZSUyMHByZXNlbnQlMjBtb21lbnQuJTIwQmVsaWV2ZSUyMGluJTIweW91cnNlbGYlMjElMjBIYXZlJTIwZmFpdGglMjBpbiUyMHlvdXIlMjBhYmlsaXRpZXMlMjBhbmQlMjBub3QlMjB5b3VyJTIwaW5hYmlsaXRpZXMuJTIwTW9kdWxlJTIwQ2xhc3MlMjAlM0Njb2RlJTNFdWstbW9kYWwtZGlhbG9nLWxhcmdlJTNDJTJGY29kZSUzRSUzQyUyRnAlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElM0NkaXYlMjBpZCUzRCUyMm1vZGFsLWMlMjIlMjBjbGFzcyUzRCUyMnVrLW1vZGFsJTIyJTIwYXJpYS1oaWRkZW4lM0QlMjJmYWxzZSUyMiUyMCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIydWstbW9kYWwtZGlhbG9nJTIwdWstcGFuZWwtYm94JTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIydWstbW9kYWwtY2xvc2UlMjB1ay1jbG9zZSUyMiUzRSUzQyUyRmElM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NoMyUyMGNsYXNzJTNEJTIydWstcGFuZWwtdGl0bGUlMjIlM0Vtb2RhbC1jJTIwcG9zaXRpb24lM0MlMkZoMyUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMmNlbHNpdXMtYmxvY2staWNvbiUyMHVrLWFsaWduLWxlZnQlMjBmYSUyMGZhLWNoZWNrJTIyJTNFJTNDJTJGc3BhbiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ3AlM0VEbyUyMG5vdCUyMGR3ZWxsJTIwaW4lMjB0aGUlMjBwYXN0JTJDJTIwZG8lMjBub3QlMjBkcmVhbSUyMG9mJTIwdGhlJTIwZnV0dXJlJTJDJTIwY29uY2VudHJhdGUlMjB0aGUlMjBtaW5kJTIwb24lMjB0aGUlMjBwcmVzZW50JTIwbW9tZW50LiUyMEJlbGlldmUlMjBpbiUyMHlvdXJzZWxmJTIxJTIwSGF2ZSUyMGZhaXRoJTIwaW4lMjB5b3VyJTIwYWJpbGl0aWVzJTIwYW5kJTIwbm90JTIweW91ciUyMGluYWJpbGl0aWVzLiUzQyUyRnAlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElM0NkaXYlMjBpZCUzRCUyMm15Y29udGVudCUyMiUyMGNsYXNzJTNEJTIydWstbW9kYWwlMjIlMjBhcmlhLWhpZGRlbiUzRCUyMmZhbHNlJTIyJTIwJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJ1ay1tb2RhbC1kaWFsb2clMjB1ay1wYW5lbC1ib3gtcHJpbWFyeSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2ElMjBocmVmJTNEJTIyJTIyJTIwY2xhc3MlM0QlMjJ1ay1tb2RhbC1jbG9zZSUyMHVrLWNsb3NlJTIyJTNFJTNDJTJGYSUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2gzJTIwY2xhc3MlM0QlMjJ1ay1tb2R1bGUtdGl0bGUlMjIlM0VJbmxpbmUlMjBjb250ZW50JTNDJTJGaDMlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NwJTNFVGhyb3VnaG91dCUyMGxpZmUlMjBwZW9wbGUlMjB3aWxsJTIwbWFrZSUyMHlvdSUyMG1hZCUyQyUyMGRpc3Jlc3BlY3QlMjB5b3UlMjBhbmQlMjB0cmVhdCUyMHlvdSUyMGJhZC4lMjBMZXQlMjBHb2QlMjBkZWFsJTIwd2l0aCUyMHRoZSUyMHRoaW5ncyUyMHRoZXklMjBkbyUyQyUyMGNhdXNlJTIwaGF0ZSUyMGluJTIweW91ciUyMGhlYXJ0JTIwd2lsbCUyMGNvbnN1bWUlMjB5b3UlMjB0b28uJTIwQmUlMjBraW5kJTIwd2hlbmV2ZXIlMjBwb3NzaWJsZS4lMjBJdCUyMGlzJTIwYWx3YXlzJTIwcG9zc2libGUuJTNDJTJGcCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRQ==[\/vc_raw_html][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row animation=”” panel_style=”” css=”.vc_custom_1455679529447{margin-bottom: 50px !important;}”][vc_column][vc_custom_heading text=”MODAL BOX” font_container=”tag:h2″ use_theme_fonts=”yes” letter_spacing=” 1px” layout_style=”uk-module-title-alt” align=”wp-celsius-heading-left” animation=”” css=”.vc_custom_1455679516617{margin-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1452266722085{margin-bottom: 60px !important;}”]Use the uk-modal class to show a popup box with…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2010","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.exptheme.com\/celsius\/wp-json\/wp\/v2\/pages\/2010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.exptheme.com\/celsius\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.exptheme.com\/celsius\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.exptheme.com\/celsius\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.exptheme.com\/celsius\/wp-json\/wp\/v2\/comments?post=2010"}],"version-history":[{"count":0,"href":"https:\/\/demo.exptheme.com\/celsius\/wp-json\/wp\/v2\/pages\/2010\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.exptheme.com\/celsius\/wp-json\/wp\/v2\/media?parent=2010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}