i use the bootstrap modals CSS for modals and we can use this plugin in touch mobile
we must to install zepto in the first:
bower install
touch modal depends on Zepto. Include them both in end of your HTML code:
<script type="text/javascript" src="../bower_components/zepto/zepto.min.js"></script> <script type="text/javascript" src="touch-modal.js"></script>use the bootstrap modals:
<link rel="stylesheet" href="css/modals.css"/>
html code:
<div class="modal" id="userFormModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span class="close"></span> <h4 class="modal-title">礼品详情</h4> </div> <div class="modal-body" style="padding-top: 25px"> <div class="box"> ............ </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" style="width: 50%">确定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> <div class="modal-backdrop fade"></div>
js config:
$("#userFormModal").modals({ //trigger method after open the modals //element:modal element //data: you can Pass the dynamic data callBack:function(element,data){ }, /trigger method before open the modals before:function(element,data){ }, //"in": it's effect that modal show in page; //"out": it's effect that modal hide in page; effect:{ in:"in", out:"fade" } });
if you init this plugin,you can use trigger method for something;
//open the modal $("#userFormModal").trigger("open",[{}]); //open the modal $("#userFormModal").trigger("close",[{}]);
bower install touch-modals