Modal window

[row]
[column type=”sm” size=”6″]
[header size=”5″ type=”single”]Standard examples[/header]
[modal-trigger id=”standardmodal1″]Standard modal window[/modal-trigger]
[modal id=”standardmodal1″ title=”Short modal title” footer=”no”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nisl id nulla varius pharetra. Cras tincidunt elementum felis, eget pulvinar mi porttitor sed. Sed risus neque, feugiat vulputate iaculis et, auctor ut metus. Ut ultricies diam nec arcu scelerisque, vel blandit lacus porttitor. Praesent tristique quam in elit tincidunt, pretium commodo enim molestie. Integer risus augue, laoreet a adipiscing quis, ornare nec odio. Vestibulum quis lacus enim.[/modal]
[hr type=”without-line” style=”solid” height=”10″ text=”no”][/hr]
[modal-trigger id=”standardmodal2″]Modal window with picture inside[/modal-trigger]
[modal id=”standardmodal2″ title=”Short modal title” footer=”no”]
[image src=”http://79.170.44.90/yatesdevelopers.com/wp-content/uploads/2014/04/office2-150×150.jpg” width=”150″ height=”150″ style=”rounded” align=”left” title=”image title” alt=”image alt text”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nisl id nulla varius pharetra. Cras tincidunt elementum felis, eget pulvinar mi porttitor sed. Sed risus neque, feugiat vulputate iaculis et, auctor ut metus. Ut ultricies diam nec arcu scelerisque, vel blandit lacus porttitor. Praesent tristique quam in elit tincidunt, pretium commodo enim molestie. Integer risus augue, laoreet a adipiscing quis, ornare nec odio. Vestibulum quis lacus enim.
[clear]
[/modal]
[hr type=”without-line” style=”solid” height=”10″ text=”no”][/hr]
[modal-trigger id=”standardmodal3″]Standard modal window with footer[/modal-trigger]
[modal id=”standardmodal3″ title=”Short modal title” footer=”yes”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nisl id nulla varius pharetra. Cras tincidunt elementum felis, eget pulvinar mi porttitor sed. Sed risus neque, feugiat vulputate iaculis et, auctor ut metus. Ut ultricies diam nec arcu scelerisque, vel blandit lacus porttitor. Praesent tristique quam in elit tincidunt, pretium commodo enim molestie. Integer risus augue, laoreet a adipiscing quis, ornare nec odio. Vestibulum quis lacus enim.[modal-footer]And this is modal footer text[/modal-footer][/modal]
[/column]
[column type=”sm” size=”6″]
[header size=”5″ type=”single”]Standard modal with image[/header]
[modal-trigger id=”standardmodalimage1″][image src=”http://79.170.44.90/yatesdevelopers.com/wp-content/uploads/2014/04/office2.jpg” width=”” height=”” style=”rounded” align=”center” title=”image title” alt=”image alt text”][/modal-trigger]
[modal id=”standardmodalimage1″ title=”Modal opened with image” footer=”yes”]
[image src=”http://79.170.44.90/yatesdevelopers.com/wp-content/uploads/2014/04/office1-150×150.jpg” width=”150″ height=”150″ style=”circle” align=”left” title=”image title” alt=”image alt text”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nisl id nulla varius pharetra. Cras tincidunt elementum felis, eget pulvinar mi porttitor sed. Sed risus neque, feugiat vulputate iaculis et, auctor ut metus. Ut ultricies diam nec arcu scelerisque, vel blandit lacus porttitor. Praesent tristique quam in elit tincidunt, pretium commodo enim molestie. Integer risus augue, laoreet a adipiscing quis, ornare nec odio. Vestibulum quis lacus enim.
[clear]
[modal-footer]And this is modal footer text[/modal-footer][/modal]
[/column]
[/row]
 
[row]
[column type=”sm” size=”6″]
[header size=”5″ type=”single”]Modal with popover[/header]
[popover title=”Modal with popover” popcontent=”This can be used for short description to preview what’s isinde” placement=”top” trigger=”hover”][modal-trigger id=”modal-popover1″][image src=”http://79.170.44.90/yatesdevelopers.com/wp-content/uploads/2014/04/office1-1024×684.jpg” width=”1024″ height=”684″ style=”rounded” align=”center” title=”image title” alt=”image alt text”][/modal-trigger][/popover]
[modal id=”modal-popover1″ title=”Modal opened with image” footer=”yes”]
[image src=”http://79.170.44.90/yatesdevelopers.com/wp-content/uploads/2014/04/office2-150×150.jpg” width=”150″ height=”150″ style=”rounded” align=”right” title=”image title” alt=”image alt text”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nisl id nulla varius pharetra. Cras tincidunt elementum felis, eget pulvinar mi porttitor sed. Sed risus neque, feugiat vulputate iaculis et, auctor ut metus. Ut ultricies diam nec arcu scelerisque, vel blandit lacus porttitor. Praesent tristique quam in elit tincidunt, pretium commodo enim molestie. Integer risus augue, laoreet a adipiscing quis, ornare nec odio. Vestibulum quis lacus enim.
[clear]
[modal-footer]And this is modal footer text[/modal-footer][/modal]
[/column]
[column type=”sm” size=”6″]
[header size=”5″ type=”single”]Modal with tooltip[/header]
[tooltip title=”You can also use tooltips here to show small description or preview text of what’s inside the modal window” placement=”top”][modal-trigger id=”modal-tooltip1″][image src=”http://79.170.44.90/yatesdevelopers.com/wp-content/uploads/2014/04/office2.jpg” width=”” height=”” style=”rounded” align=”center” title=”image title” alt=”image alt text”][/modal-trigger][/tooltip]
[modal id=”modal-tooltip1″ title=”Modal opened with image” footer=”yes”]
[image src=”http://79.170.44.90/yatesdevelopers.com/wp-content/uploads/2014/04/office2.jpg” style=”rounded” align=”center” title=”image title” alt=”image alt text”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nisl id nulla varius pharetra. Cras tincidunt elementum felis, eget pulvinar mi porttitor sed. Sed risus neque, feugiat vulputate iaculis et, auctor ut metus. Ut ultricies diam nec arcu scelerisque, vel blandit lacus porttitor. Praesent tristique quam in elit tincidunt, pretium commodo enim molestie. Integer risus augue, laoreet a adipiscing quis, ornare nec odio. Vestibulum quis lacus enim.
[clear]
[modal-footer]And this is modal footer text[/modal-footer][/modal]
[/column]
[/row]