集合Bootstrap自定义confirm

2023-10-22 15:31:19 浏览数 (4)

首先 

(function(){...}) 是 (document).ready(function(){...}) 的简写形式 页面载入后执行花括号中的 js

Common js

代码语言:javascript复制
//页面载入后执行

$(function() {

    Common = {

        confirm:function(params){

            var model = $("#common_confirm_model");

            model.find(".title").html(params.title);

            model.find(".message").html(params.message);

            //每次都将监听先关闭,防止多次监听发生,确保只有一次监听

            model.find(".cancel").off("click");

            model.find(".ok").off("click");

            model.find(".ok").on("click",function(){

                params.operate(true)

            });

            model.find(".cancel").on("click",function(){

                params.operate(false)

            });

        }

    }; 

});

自定义弹层(html)

代码语言:javascript复制
<div id="common_confirm_model" class="modal">

    <div class="modal-dialog modal-sm">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> <span class="title"></span></h5>

            </div>

            <div class="modal-body small">

                <p ><span class="message"></span></p>

            </div>

            <div class="modal-footer" >

                <button type="button" class="btn btn-primary ok" data-dismiss="modal">确认</button>

                <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>

            </div>

        </div>

    </div>

</div>

触发、调用 js

代码语言:javascript复制
$(function(){

    $('.status_confirm').on('click', function(){

        $word = $(this).attr('data-word');

        $href = $(this).attr('data-href');

        Common.confirm({

            title: "状态修改",

            message: "是否"   $word,

            operate: function (result) {

                if (result) {

                    window.location = $href;

                } else {

                    console.log('false');

                }

            }

        })

    });

});

FYI:http://shaojinjie.com/2015/11/18/集合Bootstrap自定义confirm/

1 人点赞