Modal

• Posted: April 21, 2015
• / By: Julita
• / In:

Create popup boxes with the following HTML markup:

XHTML

<div id="popup" data-toggle="modal" data-target="#modal1"></div> <!-- Modal --> <div class="modal fade ct-modal" id="modal1" tabindex="-1" role="dialog" data-bg-image="assets/images/demo-content/image2a.png"> <div class="modal-dialog ct-modalDialog"> <div class="modal-content ct-modalContent"> <div class="modal-header ct-modalHeader"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button> [title] </div> <div class="modal-body ct-modalBody"> <div class="ct-modalBody-header"> [content] </div> <div class="ct-modalBody-content"> [content] </div> </div> <div class="modal-footer ct-modalFooter" data-discount-image="assets/images/demo-content/discount.png"> [content] </div> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<div id="popup" data-toggle="modal" data-target="#modal1"></div>   <!-- Modal --> <div class="modal fade ct-modal" id="modal1" tabindex="-1" role="dialog" data-bg-image="assets/images/demo-content/image2a.png">     <div class="modal-dialog ct-modalDialog">         <div class="modal-content ct-modalContent">             <div class="modal-header ct-modalHeader">                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>                   [title]               </div>             <div class="modal-body ct-modalBody">                 <div class="ct-modalBody-header">                       [content]                   </div>                   <div class="ct-modalBody-content">                       [content]                   </div>               </div>             <div class="modal-footer ct-modalFooter" data-discount-image="assets/images/demo-content/discount.png">                       [content]               </div>         </div>     </div> </div>

Modal