#
Modals
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 add a modal to pages please refer following guidelines
#
Modal Types
We 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
#
Slide Up
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.
<div className="modal fade slide-up disable-scroll" id="modalSlideUp"
tabindex="-1" role="dialog"
aria-labelledby="modalSlideUpLabel" aria-hidden="false">
<div className="modal-dialog ">
<div className="modal-content-wrapper">
<div className="modal-content">
<div className="modal-header clearfix text-left">
<button type="button" className="close" data-dismiss="modal" aria-hidden="true">
<i className="pg-close fs-14"></i>
</button>
<h5>Heading <span className="semi-bold">here</span></h5>
</div>
<div className="modal-body">
Add Your Content here
</div>
</div>
</div>
</div>
</div>
#
Stick Up
Simply add the class stick-up to main modal DIV. You can change the id attribute of the modal to anything you want.
<div className="modal fade stick-up" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header clearfix text-left">
<button type="button" className="close" data-dismiss="modal" aria-hidden="true">
<i className="pg-close fs-14"></i>
</button>
<h5>Payment <span className="semi-bold">Information</span></h5>
<p>We need payment information inorder to process your order</p>
</div>
<div className="modal-body">
<form className="form-default" role="form">
<div className="row">
<div className="col-sm-12">
<div className="form-group">
<label>Company Name</label>
<input type="email" className="form-control" >
</div>
</div>
</div>
<div className="row">
<div className="col-sm-8">
<div className="form-group">
<label>Card Number</label>
<input type="text" className="form-control" >
</div>
</div>
<div className="col-sm-4">
<div className="form-group">
<label>Card Holder</label>
<input type="text" className="form-control" >
</div>
</div>
</div>
</form>
<div className="row">
<div className="col-sm-9">
<div className="b-a b-grey b-rad-sm clearfix p-l-10 p-r-10">
<div className="pull-left">
<h5 className="semi-bold">TOTAL</h5>
</div>
<div className="pull-right">
<h5 className="light">$20.00</h5>
</div>
</div>
</div>
<div className="col-sm-3">
<button type="button" className="btn btn-primary btn-lg btn-large btn-block" data-dismiss="modal">
PAY
</button>
</div>
</div>
</div>
</div>
</div>
</div>
#
Slide Right
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 className="modal fade slide-right" id="modalSlideLeft" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div className="modal-dialog modal-sm">
<div className="modal-content-wrapper">
<div className="modal-content table-block">
<button type="button" className="close" data-dismiss="modal" aria-hidden="true"><i className="pg-close fs-14"></i></button>
<div className="modal-body v-align-middle text-center ">
<h5 className="text-primary ">Before you <span className="semi-bold">proceed</span>, you have to login to make the necessary changes</h5>
<br>
<button type="button" className="btn btn-primary btn-block" data-dismiss="modal">Continue</button>
<button type="button" className="btn btn-default btn-block" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
#
Fill In
Simply add the class fill-in to main modal DIV. You can change the id attribute of the modal to anything you want.
<div className="modal fade fill-in" id="modalFillIn" tabindex="-1" role="dialog"
aria-labelledby="modalFillInLabel" aria-hidden="true">
<button type="button" className="close" data-dismiss="modal" aria-hidden="true">
<i className="pg-close"></i>
</button>
<div className="modal-dialog ">
<div className="modal-content">
<div className="modal-header">
<h5 className="text-left p-b-5"><span className="semi-bold">News letter</span> signup</h5>
</div>
<div className="modal-body">
<div className="row">
<div className="col-md-9">
<input type="text" placeholder="Your email address here" className="form-control input-lg" id="icon-filter" name="icon-filter">
</div>
<div className="col-md-3 text-center">
<button type="button" className="btn btn-primary btn-lg btn-large fs-15">Sign up</button>
</div>
</div>
<p className="text-right hinted-text p-t-10 p-r-10">What is it ? Terms and conditions</p>
</div>
<div className="modal-footer">
</div>
</div>
</div>
</div>
#
How to Open Bootstrap Modal
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 className="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>