Element – Modal Popups – KB3 Technical Systems

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.

[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://demo.sh-themes.com/credencebeta/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]

[sh_headerdouble size=”h4″]

Small or Large

[/sh_headerdouble]

Have your modals open in small or large windows.

[sh_modal title=”A Smaller Modal” modalfont=”#555555″ buttontext=”Small Modal Window” buttonborderradius=”4px”]

[/sh_modal]

[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]

[sh_headerdouble size=”h4″]

Style Your Buttons and Modals

[/sh_headerdouble]

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.

[sh_modal title=”Styled Modals” modalbg=”#34495e” modalfont=”#efefef” buttontext=”Styled Button” buttoncolor=”#34495e” buttontextcolor=”#efefef” buttonborderwidth=”0px” buttonborderradius=”4px”]

[/sh_modal]

[sh_modal title=”Styled Modals” modalbg=”#f39c12″ modalfont=”#efefef” buttontext=”Styled Button” buttoncolor=”#f39c12″ buttontextcolor=”#efefef” buttonborderradius=”4px”]

[/sh_modal]

[sh_headerdouble size=”h4″]

Include just about anything

[/sh_headerdouble]

Add responsive videos and other shortcodes to your modals. The possibilities are endless.

[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”]

[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″]

[shvc_colorbg backgroundcolor=”#eeeeee” fontcolor=””]

[sh_headerdouble size=”h4″]

Options

[/sh_headerdouble]

[shvc_checklist iconset=”linear” iconlinear=”icon-check-square”][shvc_checklist_item]

Use large and small sized modals