README.textile

touch modal

i use the bootstrap modals CSS for modals and we can use this plugin in touch mobile

how to use?

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

    bower install touch-modals