Dialog with CSS animation

Dialog example

This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.

Dialog with CSS animation

1
2
3
4
5

<aclass="mt-xs mb-xs mr-xs popup-with-zoom-anim btn btn-primary"href="#small-dialog">Open with fade-zoom animation</a><aclass="mt-xs mb-xs popup-with-move-anim btn btn-primary"href="#small-dialog">Open with fade-slide animation</a><divclass="dialog dialog-sm zoom-anim-dialog mfp-hide"id="small-dialog"><h1>Dialog example</h1><p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p></div>

Popup with video or map

In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.

Form

<aclass="popup-with-form btn btn-primary"href="#demo-form">Open Form</a><divid="demo-form"class="white-popup-block mfp-hide form-horizontal"><divclass="row"><divclass="col-sm-12"><h4>Basic Form</h4><pclass="mb-lg">Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.</p></div></div><divclass="form-group mt-lg"><divclass="row"><divclass="col-sm-12"><labelfor="name"class="control-label">Name</label><inputtype="text"id="name"name="name"class="form-control"placeholder="Type your name..."/></div></div></div><divclass="form-group"><divclass="row"><divclass="col-sm-12"><labelfor="email"class="control-label">Email</label><inputtype="email"id="email"name="email"class="form-control"placeholder="Type your email..."/></div></div></div><divclass="form-group"><divclass="row"><divclass="col-sm-12"><labelfor="url"class="control-label">URL</label><inputtype="url"id="url"name="url"class="form-control"placeholder="Type an URL..."/></div></div></div><divclass="form-group"><divclass="row"><divclass="col-sm-12"><labelfor="textarea"class="control-label">Comment</label><textarearows="5"id="textarea"name="textarea"class="form-control"placeholder="Type your comment..."></textarea></div></div></div><divclass="row mb-lg"><divclass="col-sm-12"><buttonclass="btn btn-primary">Submit</button><buttontype="reset"class="btn btn-primary">Reset</button></div></div></div>