集合Bootstrap自定义confirm

首先 

$(function(){...}) 是 $(document).ready(function(){...}) 的简写形式

页面载入后执行花括号中的 js

Common js

//页面载入后执行

$(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)

<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

$(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/%E9%9B%86%E5%90%88Bootstrap%E8%87%AA%E5%AE%9A%E4%B9%89confirm/

暂无评论
  1. Secret

    前端弹窗插件可以试试Layer.js,封装一下很好用。

    Secret August 4th, 2017 at 09:30 pm回复
    1. luka-chen

      @Secret:好嘞,有空整blog的时候再搞吧 ^-^

      luka-chen August 18th, 2017 at 03:12 pm回复
发表新评论