Modals are created using Bootstrap Native Modals, they will work as the same way how it works in bootstrap, but it is styled to pages color scheme. To run a Bootstrap Modal, there is no depencies, you do not have to include extra JS or CSS files,To add a modal to pages please reffer following guidelines
Bootstrap Modals GuidelineWe have added new options to bootstrap modals and made even awesome, by simply changing a class name you can get the following. There 3 different modals to choose from with 3 different size options for each, varying upt 9 modals
Simply add the class slide-up to main modal DIV & wrap modal-content with modal-content-wrapper, Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want.
<!-- Modal -->
<div class="modal fade slide-up disable-scroll" id="modalSlideUp" tabindex="-1" role="dialog" aria-labelledby="modalSlideUpLabel" aria-hidden="false">
<div class="modal-dialog ">
<div class="modal-content-wrapper">
<div class="modal-content">
<div class="modal-header clearfix text-left">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close fs-14"></i>
</button>
<h5>Heading <span class="semi-bold">here</span></h5>
</div>
<div class="modal-body">
Add Your Content here
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
<!-- /.modal-dialog -->
Simply add the class stick-up to main modal DIV. You can change the id attribute of the modal to anything you want.
<!-- MODAL STICK UP -->
<div class="modal fade stick-up" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header clearfix text-left">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close fs-14"></i>
</button>
<h5>Payment <span class="semi-bold">Information</span></h5>
<p>We need payment information inorder to process your order</p>
</div>
<div class="modal-body">
<form class="form-default" role="form">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>Company Name</label>
<input type="email" class="form-control" >
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label>Card Number</label>
<input type="text" class="form-control" >
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Card Holder</label>
<input type="text" class="form-control" >
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-sm-9">
<div class="b-a b-grey b-rad-sm clearfix p-l-10 p-r-10">
<div class="pull-left">
<h5 class="semi-bold">TOTAL</h5>
</div>
<div class="pull-right">
<h5 class="light">$20.00</h5>
</div>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-primary btn-lg btn-large btn-block" data-dismiss="modal">
PAY
</button>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- END MODAL STICK UP -->
Simply add the class slide-right to main modal DIV & wrap modal-content with modal-content-wrapper, Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want.
<div class="modal fade slide-right" id="modalSlideLeft" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content-wrapper">
<div class="modal-content table-block">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
<div class="modal-body v-align-middle text-center ">
<h5 class="text-primary ">Before you <span class="semi-bold">proceed</span>, you have to login to make the necessary changes</h5>
<br>
<button type="button" class="btn btn-primary btn-block" data-dismiss="modal">Continue</button>
<button type="button" class="btn btn-default btn-block" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Simply add the class fill-in to main modal DIV. You can change the id attribute of the modal to anything you want.
<div class="modal fade fill-in" id="modalFillIn" tabindex="-1" role="dialog" aria-labelledby="modalFillInLabel" aria-hidden="true">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close"></i>
</button>
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h5 class="text-left p-b-5"><span class="semi-bold">News letter</span> signup</h5>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-9">
<input type="text" placeholder="Your email address here" class="form-control input-lg" id="icon-filter" name="icon-filter">
</div>
<div class="col-md-3 text-center">
<button type="button" class="btn btn-primary btn-lg btn-large fs-15">Sign up</button>
</div>
</div>
<p class="text-right hinted-text p-t-10 p-r-10">What is it ? Terms and conditions</p>
</div>
<div class="modal-footer">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
One method is to create a Link or Button with the following attributes
data-toggle="modal" data-target="#myModal"
* Make sure the data-target value to be the ID of your Modal
example :
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
Other Useful resources thay you may find: