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