Modals

Modals Shortcodes

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Toggle a modal via JavaScript by clicking the button below. You can build with Ultimate Addons Modal shortcodes.


Default

Default Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

Close

Optional Sizes

Large Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

Close

Medium Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

Close

Small Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.

Close

With Form


With Video


With Google Map


Display on Image


Display on Text

[type='text']
[type='text']
[type='password']
[type='password']
[gravityform id="1" title="true" description="true" ajax="true"]
<div class='gf_browser_unknown gform_wrapper register-free-wrappper_wrapper' id='gform_wrapper_1' ><a id='gf_1' class='gform_anchor' ></a><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_1' id='gform_1' class='register-free-wrappper' action='/modals/#gf_1'> <div class='gform_heading'> <h3 class='gform_title'>Register</h3> <span class='gform_description'>Create a free account and access<span> free slides weekly</span> </span> </div> <div class='gform_body'><ul id='gform_fields_1' class='gform_fields right_label form_sublabel_below description_below'><li id='field_1_1' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_1' ><span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_1_1' type='text' value='' class='large' tabindex='1' placeholder='Username' aria-required="true" aria-invalid="false" /></div></li><li id='field_1_7' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label gfield_label_before_complex' for='input_1_7_3' ><span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name gfield_trigger_change' id='input_1_7'> <span id='input_1_7_3_container' class='name_first' > <input type='text' name='input_7.3' id='input_1_7_3' value='' aria-label='First name' tabindex='3' aria-required="true" aria-invalid="false" placeholder='First Name'/> <label for='input_1_7_3' >First</label> </span> <span id='input_1_7_6_container' class='name_last' > <input type='text' name='input_7.6' id='input_1_7_6' value='' aria-label='Last name' tabindex='5' aria-required="true" aria-invalid="false" placeholder='Last Name'/> <label for='input_1_7_6' >Last</label> </span> </div></li><li id='field_1_3' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_3' ><span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_3' id='input_1_3' type='text' value='' class='large' tabindex='7' placeholder='Email'/> </div></li><li id='field_1_4' class='gfield register-password gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label gfield_label_before_complex' for='input_1_4' ><span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container ginput_container_password' id='input_1_4_container'> <span id='input_1_4_1_container' class='ginput_left'> <input type='password' name='input_4' id='input_1_4' value='' tabindex='8' placeholder='Password' aria-required="true" aria-invalid="false" /> <label for='input_1_4' >Enter Password</label> </span> <span id='input_1_4_2_container' class='ginput_right'> <input type='password' name='input_4_2' id='input_1_4_2' value='' tabindex='9' placeholder='Confirm Password' aria-required="true" aria-invalid="false" /> <label for='input_1_4_2' >Confirm Password</label> </span> <div class='gf_clear gf_clear_complex'></div> </div></li><li id='field_1_8' class='gfield gform_validation_container field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_8' >Name</label><div class='ginput_container'><input name='input_8' id='input_1_8' type='text' value='' /></div><div class='gfield_description'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer right_label'> <input type='submit' id='gform_submit_button_1' class='gform_button button' value='SIGN UP' tabindex='10' onclick='if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true; jQuery("#gform_1").trigger("submit",[true]); }' /> <input type='hidden' name='gform_ajax' value='form_id=1&amp;title=1&amp;description=1&amp;tabindex=1' /> <input type='hidden' class='gform_hidden' name='is_submit_1' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='1' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_1' value='WyJbXSIsIjdmODFjYTNhMTJmMmM4MWZhZGQ3ZTQ4YWQ2ZGNjMjJhIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_1' id='gform_ajax_frame_1'>This iframe contains the logic required to handle AJAX powered Gravity Forms.</iframe> <script type='text/javascript'>jQuery(document).ready(function($){gformInitSpinner( 1, 'https://slidestore.com/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery('#gform_ajax_frame_1').load( function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_1');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_1').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;if(is_form){jQuery('#gform_wrapper_1').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_1').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_1').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_1').offset().top); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_1').val();gformInitSpinner( 1, 'https://slidestore.com/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery(document).trigger('gform_page_loaded', [1, current_page]);window['gf_submitting_1'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('#gforms_confirmation_message_1').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_1').replaceWith('<' + 'div id=\'gforms_confirmation_message_1\' class=\'gform_confirmation_message_1 gforms_confirmation_message\'' + '>' + confirmation_content + '<' + '/div' + '>');jQuery(document).scrollTop(jQuery('#gforms_confirmation_message_1').offset().top);jQuery(document).trigger('gform_confirmation_loaded', [1]);window['gf_submitting_1'] = false;}, 50);}else{jQuery('#gform_1').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [1, current_page]);} );} );</script><script type='text/javascript'> if(typeof gf_global == 'undefined') var gf_global = {"gf_currency_config":{"name":"U.S. Dollar","symbol_left":"$","symbol_right":"","symbol_padding":"","thousand_separator":",","decimal_separator":".","decimals":2},"base_url":"https:\/\/slidestore.com\/wp-content\/plugins\/gravityforms","number_formats":[],"spinnerUrl":"https:\/\/slidestore.com\/wp-content\/plugins\/gravityforms\/images\/spinner.gif"};jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 1) {if(typeof Placeholders != 'undefined'){ Placeholders.enable(); }} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [1, 1]) } ); </script>