集合Bootstrap自定义confirm

lukachen

发布于 2023-10-22 15:31:19

52700

代码可运行

文章被收录于专栏：LukaChen BlogLukaChen Blog

运行总次数：0

代码可运行

首先

(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/

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016-09-16，如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap