[vc_row][vc_column][vc_empty_space][vc_column_text]
Modal Popups and Windows
Credence contains [sh_highlight choice=”foreground” color=”accentcolor”]Advanced Modal Popups[/sh_highlight] which you can add to your content. These can be made to load with the page or triggered by a button. The Modal Popups included in Credence have many options available.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][sh_modal openready=”enable” title=”A Modal that opens on page load” modalsize=”large” modalfont=”#555555″][sh_columns number=”2″]
[sh_column]
[sh_imageframe style=”lifted” source=”http://www.lindsaymorinville.com/wp-content/uploads/2014/09/bird_11.png” bordersize=”1px” bordercolor=”#ccc” padding=”5px” action=”none”]
[/sh_column]
[sh_column]
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
[/sh_column]
[/sh_columns]
[sh_progress style=”striped” padding=”7px” barcolor=”rgba(0,0,0,0.5)” textcolor=”#fff” background=”rgba(0,0,0,0.15)” percent=”100″ symbol=”%” text=”Be Creative”][/sh_modal][vc_empty_space][sh_headerdouble size=”h4″]
Small or Large
[/sh_headerdouble][vc_empty_space][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]
Have your modals open in small or large windows.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][sh_modal title=”A Smaller Modal” modalfont=”#555555″ buttontext=”Small Modal Window” buttonborderradius=”4px”]
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
[/sh_modal][/vc_column_inner][vc_column_inner width=”1/3″][sh_modal title=”A Larger Modal” modalsize=”large” modalfont=”#555555″ buttontext=”Large Modal Window” buttonborderradius=”4px”]
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
[/sh_modal][/vc_column_inner][/vc_row_inner][vc_empty_space][sh_headerdouble size=”h4″]
Style Your Buttons and Modals
[/sh_headerdouble][vc_empty_space][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]
With Credence, you can style the modal buttons with any color font, background and border color. You can also set border size and radius. You can also change the modal background, font, and border color. Choose if you want to enable and disable the footer.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][sh_modal title=”Styled Modals” modalbg=”#34495e” modalfont=”#efefef” buttontext=”Styled Button” buttoncolor=”#34495e” buttontextcolor=”#efefef” buttonborderwidth=”0px” buttonborderradius=”4px”]
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
[/sh_modal][/vc_column_inner][vc_column_inner width=”1/3″][sh_modal title=”Styled Modals” modalbg=”#f39c12″ modalfont=”#efefef” buttontext=”Styled Button” buttoncolor=”#f39c12″ buttontextcolor=”#efefef” buttonborderradius=”4px”]
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
[/sh_modal][/vc_column_inner][/vc_row_inner][vc_empty_space][sh_headerdouble size=”h4″]
Include just about anything
[/sh_headerdouble][vc_empty_space][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]
Add responsive videos and other shortcodes to your modals. The possibilities are endless.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][sh_modal title=”Modal with responsive youtube video” modalsize=”large” modalbg=”#34495e” modalfont=”#efefef” buttontext=”Youtube Video” buttonborderradius=”4px”][sh_video video=”youtube” height=”360″ width=”700″ id=”F5FEj9U-CJM”]
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.[/sh_modal][/vc_column_inner][vc_column_inner width=”1/3″][sh_modal title=”Modal with responsive Vimeo Video” modalsize=”large” modalbg=”#dd9323″ modalfont=”#efefef” buttontext=”Vimeo Video” buttonborderradius=”4px”][sh_video height=”350″ width=”700″ video=”vimeo” id=”103364847″]
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.[/sh_modal][/vc_column_inner][/vc_row_inner][vc_empty_space][vc_empty_space][/vc_column][/vc_row][vc_row css=”.vc_custom_1440091882437{margin-bottom: 0px !important;}”][vc_column][shvc_colorbg backgroundcolor=”#eeeeee” fontcolor=””][vc_empty_space height=”30px”][sh_headerdouble size=”h4″]
Options
[/sh_headerdouble][vc_row_inner][vc_column_inner width=”1/2″][shvc_checklist iconset=”linear” iconlinear=”icon-check-square”][shvc_checklist_item]
Use large and small sized modals
[/shvc_checklist_item][shvc_checklist_item]
Control button borders, text and colors
[/shvc_checklist_item][shvc_checklist_item]
Change Modal background colors
[/shvc_checklist_item][shvc_checklist_item]
Available in Generator and Visual Composer
[/shvc_checklist_item][/shvc_checklist][/vc_column_inner][vc_column_inner width=”1/2″][shvc_checklist iconset=”linear” iconlinear=”icon-check-square”][shvc_checklist_item]
Enable or disable footers
[/shvc_checklist_item][shvc_checklist_item]
Change modal text colors
[/shvc_checklist_item][shvc_checklist_item]
Change modal border colors
[/shvc_checklist_item][shvc_checklist_item]
Add other elements to your modal window
[/shvc_checklist_item][/shvc_checklist][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30px”][/shvc_colorbg][/vc_column][/vc_row]