{"id":378,"date":"2015-03-25T23:32:59","date_gmt":"2015-03-25T23:32:59","guid":{"rendered":"http:\/\/razonartificial.com\/themes\/reason-wp\/?page_id=378"},"modified":"2015-03-25T23:32:59","modified_gmt":"2015-03-25T23:32:59","slug":"modals","status":"publish","type":"page","link":"https:\/\/test.innovative8.uk.com\/wp3\/modals\/","title":{"rendered":"Modals"},"content":{"rendered":"<section class=\"css-section\">\n<h2 class=\"section-title no-margin-top\">Modals<\/h2>\n<div class=\"row\">\n<div class=\"col-md-4\">\n<h3>Normal Modal<\/h3>\n<p>                        <!-- Button trigger modal --><br \/>\n                        <button class=\"btn btn-primary btn-lg btn-ar\" data-toggle=\"modal\" data-target=\"#myModal\"><br \/>\n                          Launch demo modal<br \/>\n                        <\/button><\/p>\n<p>                        <!-- Modal --><\/p>\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n<div class=\"modal-dialog\">\n<div class=\"modal-content\">\n<div class=\"modal-header\">\n                                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;<\/button><\/p>\n<h4 class=\"modal-title\" id=\"myModalLabel\">Modal title<\/h4>\n<\/p><\/div>\n<div class=\"modal-body\">\n<p><img decoding=\"async\" src=\"https:\/\/test.innovative8.uk.com\/wp3\/wp-content\/uploads\/2015\/03\/w1.jpg\" alt=\"\" class=\"img-responsive\"><\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quasi voluptas nostrum culpa sunt laboriosam corporis perspiciatis animi rem unde. Nihil, doloribus soluta possimus non asperiores eius natus quaerat porro.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, ad, adipisci, vel recusandae qui pariatur id nobis officiis dolorum non tempora quae libero cumque consequuntur sint alias odit possimus quo.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, quisquam, tempore, ipsam, blanditiis praesentium cumque commodi vitae minus perferendis officia quidem aliquid natus explicabo! Blanditiis a magni facere temporibus odit.<\/p>\n<\/p><\/div>\n<div class=\"modal-footer\">\n                                <button type=\"button\" class=\"btn btn-ar btn-default\" data-dismiss=\"modal\">Close<\/button><br \/>\n                                <button type=\"button\" class=\"btn btn-ar btn-primary\">Save changes<\/button>\n                              <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-md-4\">\n<h3>Small Modal<\/h3>\n<p>                        <!-- Button trigger modal --><br \/>\n                        <button class=\"btn btn-primary btn-lg btn-ar\" data-toggle=\"modal\" data-target=\"#myModal2\"><br \/>\n                          Launch demo modal<br \/>\n                        <\/button><\/p>\n<p>                        <!-- Modal --><\/p>\n<div class=\"modal fade\" id=\"myModal2\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n<div class=\"modal-dialog modal-sm\">\n<div class=\"modal-content\">\n<div class=\"modal-header\">\n                                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;<\/button><\/p>\n<h4 class=\"modal-title\" id=\"myModalLabel\">Modal title<\/h4>\n<\/p><\/div>\n<div class=\"modal-body\">\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quasi voluptas nostrum culpa sunt laboriosam corporis perspiciatis animi rem unde. Nihil, doloribus soluta possimus non asperiores eius natus quaerat porro.<\/p>\n<\/p><\/div>\n<div class=\"modal-footer\">\n                                <button type=\"button\" class=\"btn btn-ar btn-default\" data-dismiss=\"modal\">Close<\/button><br \/>\n                                <button type=\"button\" class=\"btn btn-ar btn-primary\">Save changes<\/button>\n                              <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-md-4\">\n<h3>Large Modal<\/h3>\n<p>                        <!-- Button trigger modal --><br \/>\n                        <button class=\"btn btn-primary btn-lg btn-ar\" data-toggle=\"modal\" data-target=\"#myModal3\"><br \/>\n                          Launch demo modal<br \/>\n                        <\/button><\/p>\n<p>                        <!-- Modal --><\/p>\n<div class=\"modal fade\" id=\"myModal3\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n<div class=\"modal-dialog modal-lg\">\n<div class=\"modal-content\">\n<div class=\"modal-header\">\n                                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;<\/button><\/p>\n<h4 class=\"modal-title\" id=\"myModalLabel\">Modal title<\/h4>\n<\/p><\/div>\n<div class=\"modal-body\">\n<p><img decoding=\"async\" src=\"https:\/\/test.innovative8.uk.com\/wp3\/wp-content\/uploads\/2015\/03\/image-1.jpg\" alt=\"\" class=\"img-responsive imageborder aligncenter\"><\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quasi voluptas nostrum culpa sunt laboriosam corporis perspiciatis animi rem unde. Nihil, doloribus soluta possimus non asperiores eius natus quaerat porro.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, mollitia eius libero nisi doloremque alias quasi fugit natus aliquam sapiente obcaecati praesentium corporis et temporibus exercitationem blanditiis molestiae totam. Eligendi!<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, ad, adipisci, vel recusandae qui pariatur id nobis officiis dolorum non tempora quae libero cumque consequuntur sint alias odit possimus quo.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, quisquam, tempore, ipsam, blanditiis praesentium cumque commodi vitae minus perferendis officia quidem aliquid natus explicabo! Blanditiis a magni facere temporibus odit.<\/p>\n<\/p><\/div>\n<div class=\"modal-footer\">\n                                <button type=\"button\" class=\"btn btn-ar btn-default\" data-dismiss=\"modal\">Close<\/button><br \/>\n                                <button type=\"button\" class=\"btn btn-ar btn-primary\">Save changes<\/button>\n                              <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<p>                <!-- Panel Code --><\/p>\n<div class=\"panel panel-default\">\n<div class=\"panel-heading panel-heading-link\">\n                        <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse1\" class=\"collapsed\"><i class=\"fa fa-terminal\"><\/i> Show Code<\/a>\n                    <\/div>\n<div id=\"collapse1\" class=\"panel-collapse collapse\">\n<div class=\"panel-body panel-body-no-padding\">\n                            [xml]<br \/>\n&lt;!&#8211; Button trigger modal &#8211;&gt;<br \/>\n&lt;button class=&quot;btn btn-primary btn-lg btn-ar&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;<br \/>\nLaunch demo modal<br \/>\n&lt;\/button&gt;<\/p>\n<p>&lt;!&#8211; Modal &#8211;&gt;<br \/>\n&lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;<br \/>\n&lt;div class=&quot;modal-dialog&quot;&gt;<br \/>\n&lt;div class=&quot;modal-content&quot;&gt;<br \/>\n    &lt;div class=&quot;modal-header&quot;&gt;<br \/>\n        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;\/button&gt;<br \/>\n        &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt;Modal title&lt;\/h4&gt;<br \/>\n    &lt;\/div&gt;<br \/>\n    &lt;div class=&quot;modal-body&quot;&gt;<br \/>\n        &#8230;<br \/>\n    &lt;\/div&gt;<br \/>\n    &lt;div class=&quot;modal-footer&quot;&gt;<br \/>\n        &#8230;<br \/>\n    &lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n                            [\/xml]\n                        <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- panel show code --><br \/>\n            <\/section>\n<section class=\"css-section\">\n<h2 class=\"section-title\">Video Modal<\/h2>\n<p class=\"alert alert-success\">Support for <strong>Youtube<\/strong>, <strong>Vimeo<\/strong>, <strong>HTML5 Video<\/strong>, etc. Video fully responsive to all the screens<\/p>\n<div class=\"row\">\n<div class=\"col-md-4\">\n<h3>Width Title<\/h3>\n<p>                        <!-- Button trigger modal --><br \/>\n                        <button class=\"btn btn-primary btn-lg btn-ar\" data-toggle=\"modal\" data-target=\"#myModal4\"><br \/>\n                          Launch demo modal<br \/>\n                        <\/button><\/p>\n<p>                        <!-- Modal --><\/p>\n<div class=\"modal fade\" id=\"myModal4\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n<div class=\"modal-dialog modal-lg\">\n<div class=\"modal-content\">\n<div class=\"modal-header\">\n                                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;<\/button><\/p>\n<h4 class=\"modal-title\" id=\"myModalLabel\">Modal title<\/h4>\n<\/p><\/div>\n<div class=\"modal-body\">\n<div class=\"video\">\n                                    <iframe src=\"http:\/\/player.vimeo.com\/video\/21081887?title=0&amp;byline=0&amp;portrait=0\"><\/iframe>\n                                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-md-4\">\n<h3>Only Video<\/h3>\n<p>                        <!-- Button trigger modal --><br \/>\n                        <button class=\"btn btn-primary btn-lg btn-ar\" data-toggle=\"modal\" data-target=\"#myModal5\"><br \/>\n                          Launch demo modal<br \/>\n                        <\/button><\/p>\n<p>                        <!-- Modal --><\/p>\n<div class=\"modal fade\" id=\"myModal5\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n<div class=\"modal-dialog modal-lg\">\n<div class=\"modal-content\">\n<div class=\"modal-body no-padding\">\n<div class=\"video\">\n                                    <iframe src=\"http:\/\/player.vimeo.com\/video\/21081887?title=0&amp;byline=0&amp;portrait=0\"><\/iframe>\n                                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-md-4\">\n<h3>Responsive Size<\/h3>\n<p>                        <!-- Button trigger modal --><br \/>\n                        <button class=\"btn btn-primary btn-lg btn-ar\" data-toggle=\"modal\" data-target=\"#myModal6\"><br \/>\n                          Launch demo modal<br \/>\n                        <\/button><\/p>\n<p>                        <!-- Modal --><\/p>\n<div class=\"modal fade\" id=\"myModal6\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n<div class=\"modal-dialog\">\n<div class=\"modal-content\">\n<div class=\"modal-body\">\n<div class=\"video\">\n                                    <iframe src=\"\/\/www.youtube.com\/embed\/9d8wWcJLnFI?rel=0\" frameborder=\"0\" allowfullscreen\"=\"\"><\/iframe>\n                                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Modals Normal Modal Launch demo modal &times; Modal title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quasi voluptas nostrum culpa sunt laboriosam corporis perspiciatis animi rem unde. Nihil, doloribus soluta possimus non asperiores eius natus quaerat porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, ad, adipisci, vel recusandae qui pariatur id nobis officiis dolorum non tempora quae libero cumque consequuntur sint alias odit possimus quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, quisquam, tempore, ipsam, blanditiis praesentium cumque commodi vitae minus perferendis officia quidem aliquid natus explicabo! Blanditiis a magni facere temporibus odit. Close Save changes Small Modal Launch demo modal &times; Modal title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quasi voluptas nostrum culpa sunt laboriosam corporis perspiciatis animi rem unde. Nihil, doloribus soluta possimus non asperiores eius natus quaerat porro. Close Save changes Large Modal Launch demo modal &times; Modal title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quasi voluptas nostrum culpa sunt laboriosam corporis perspiciatis animi rem unde. Nihil, doloribus soluta possimus non asperiores eius natus quaerat porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, mollitia eius libero nisi doloremque alias quasi fugit natus aliquam sapiente obcaecati praesentium corporis et temporibus exercitationem blanditiis molestiae totam. Eligendi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, ad, adipisci, vel recusandae qui pariatur id nobis officiis dolorum non tempora quae libero cumque consequuntur sint alias odit possimus quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, quisquam, tempore, ipsam, blanditiis praesentium cumque commodi vitae minus perferendis officia quidem aliquid natus explicabo! Blanditiis a magni facere temporibus odit. Close Save changes Show Code [xml] &lt;!&#8211; Button trigger modal &#8211;&gt; &lt;button class=&quot;btn btn-primary btn-lg btn-ar&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt; Launch demo modal &lt;\/button&gt; &lt;!&#8211; Modal &#8211;&gt; &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt; &lt;div class=&quot;modal-dialog&quot;&gt; &lt;div class=&quot;modal-content&quot;&gt; &lt;div class=&quot;modal-header&quot;&gt; &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;\/button&gt; &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt;Modal title&lt;\/h4&gt; &lt;\/div&gt; &lt;div class=&quot;modal-body&quot;&gt; &#8230; &lt;\/div&gt; &lt;div class=&quot;modal-footer&quot;&gt; &#8230; &lt;\/div&gt; &lt;\/div&gt; &lt;\/div&gt; &lt;\/div&gt; [\/xml] Video Modal Support for Youtube, Vimeo, HTML5 Video, etc. Video fully responsive to all the screens Width Title Launch demo modal &times; Modal title Only Video Launch demo modal Responsive Size Launch demo modal<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"page-left-menu.php","meta":{"footnotes":""},"class_list":["post-378","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/comments?post=378"}],"version-history":[{"count":0,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/378\/revisions"}],"wp:attachment":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/media?parent=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}