Bootstrap Modal 框 alert confirm loading

/**
 * Created by Administrator on 2016/5/4.
 */
/**
 * 模态窗口
 */
window.Modal = {
    tpls:{
        alert:‘<div class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog modal-sm"  role="document" style="margin-top: 20%;"><div class="modal-content"><div class="modal-header" style="padding: 8px 15px;"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">系统提示</h4></div><div class="modal-body"><p class="message-box text-center"></p></div></div></div></div>‘,
        confirm:‘<div class="modal fade"><div class="modal-dialog modal-sm" role="document"  style="margin-top: 20%;"><div class="modal-content"><div class="modal-header"  style="padding: 8px 15px;"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">系统提示</h4></div><div class="modal-body"><p class="message-box  text-center"></p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary">确定</button></div></div></div></div>‘,
        loading:‘<div class="modal fade"><div class="modal-dialog modal-sm" role="document"  style="margin-top: 20%;"><div class="modal-content" style="box-shadow: none;border: none;background: rgba(0,0,0,0.5); color: #FFFFFF;"><div class="modal-body"><div class="text-center"><i class="fa fa-spinner fa-spin fa-2x"></i></div> <div class="message-box text-center form-control-static">正在载入...</div></div></div></div></div>‘
    },
    register:function(events){
        events = events || [];
        if(events.length == 0){
            events = [‘alert‘, ‘confirm‘, ‘loading‘];
        }
        var body = $(document.body);
        this.modal = {};
        for(var i=0; i<events.length; i++){
            var event = events[i];
            var tpl = this.tpls[event];
            if(tpl){
                this.modal[event] = $(tpl);
                body.append(this.modal[event]);
            }
        }
    },
    alert:function(message, config){
        config = config || {};
        var confirmText = config.confirmText || "确定";
        this.modal.alert.find(".btn-primary").text(confirmText);
        this.modal.alert.find(".message-box").html(message);
        this.modal.alert.modal("show");
    },
    confirm:function(message, config){
        config = config || {};
        var confirmText = config.confirmText || "确定";
        var cancelText = config.cancelText || "取消";
        this.modal.confirm.find(".btn-primary").text(confirmText);
        this.modal.confirm.find(".btn-default").text(cancelText);
        this.modal.confirm.find(".message-box").html(message);
        this.modal.confirm.modal("show");
        var _this = this;
        this.modal.confirm.find(".btn-primary").on("click", function(){
           if(typeof config.confirm == "function"){
               config.confirm();
           }
            _this.modal.confirm.modal("hide");
        });
    },
    loading:function(message){
        this.modal.loading.find(".message-box").html(message);
        this.modal.loading.modal({backdrop:‘static‘});
    },
    dismissLoading:function(){
        this.modal.loading.find(".message-box").html("");
        this.modal.loading.modal("hide");
    }
};
Modal.register();
时间: 2024-10-13 21:18:53

Bootstrap Modal 框 alert confirm loading的相关文章

自定义浏览器alert ,抛弃掉死板的蓝框 自定义风格提示框。jquey ui bootstrap 实现自定义 alert confirm prompt ,by大崔

首先看一下自定义提示框的效果图 alert   普通的提示当然可以自定义样式 confrim 确认框 支持callback //message 提示的信息 ,callback(true/false)回调函数 window.shconfirm = function (message, callback) 回调函数参数为 true/false prompt  邀请用户输入框 //message 提示的信息 ,callback(msg)回调函数(用户输入的消息), param:regex 输入的 正则

js 重写 bootstrap 样式 alert/confirm 消息窗口

相信很多人都受够了 alert.confirm 的样子,最近正在用 bootstrap 做项目,顺便封装了一个 bootstrap 样式的消息框. 实现起来很简单,bootstrap 本身就自带了 modal 模态框,样子还不错 :)就把它封装一下用吧. 无码无真相,少说多做,上代码. 项目是Asp.net Mvc架构的,方便全局调用,我直接在全局 Layout 页面加上以下HTML: <!-- system modal start --> <div id="ycf-alert

Bootstrap 模态框(Modal)插件

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 用法 您可以切换模态

selenium python (十一)alert/confirm/prompt的处理(js中的弹出框)

webdriver中处理js所生成的alert.confirm以及prompt,采用switch_to_alert()方法定位到alert/confirm/prompt.然后使用text/accept/dismiss/send_keys进行操作 ①text:返回alert/confirm/prompt中的文字信息 ②accept:点击确认按钮 ③dismiss:点击取消按钮 ④send_keys:输入值,这个alert/confirm/prompt没有对话框就不能使用,否则会报错 eg:百度的设

经验总结:WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法 网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设置为True即可. (参考本篇博客:http://www.cnblogs.com/qqflying/archive/20

bootstrap modal 模态框拖拽扩展

主管要求bootstrap modal 带有拖拽移动效果.代码如下: JS 1 // bootstrap 模态框窗口 移动扩展, 在bootstrap 初始化后 调用 2 var btModalMoveEx = function () { 3 function moveEx($this) { 4 var $head = $this.find(".modal-header"), $dialog = $this.find(".modal-dialog"); 5 var

Bootstrap历练实例:警告框(Alert)插件的方法

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:警告框(Alert)插件的方法</title> <meta charset="utf-8" /> <meta name=&qu

Selenium处理alert/confirm/prompt提示框

目录 About selenium处理alert提示框 selenium处理confirm提示框 selenium处理prompt提示框 返回上一页 About 回到顶部 重新认识alert首先,不是所有的alert都能叫做alert框.JavaScript中,关于消息提示框的方法有三个(虽然都跟alert差不多): alert(message)方法用于显示带有一条指定消息和一个 OK 按钮的警告框. confirm(message)方法用于显示一个带有指定消息和 OK 及取消按钮的对话框.如果

Bootstrap模态框(modal)垂直居中

http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$(this).height())/2,发现还是不可行. 最终只能研究一下源码了,发现可以在bootstrap.js文件后面添加如下代码,便可以实现垂直居中. /* =====================================================================