代码调用
showTip("haha", 1000, function() {});
showMsg("haha", function() {});
showConfirm("haha", function() {});
/** * 显示提示消息(自动关闭) * @param msg * @param sec 显示时间(毫秒) * @param callback 回调函数 */ function showTip(msg, sec, callback){ if(!sec) { sec = 1000; } Modal.tip({ title:'提示', msg: msg }, sec); setTimeout(callback, sec); } /** * 显示消息 * @param msg */ function showMsg(msg, callback){ Modal.alert({ title:'提示', msg: msg, btnok: '确定' }).on(function (e) { if(callback){ callback(); } }); } /** * 模态对话框 * @param msg * @returns */ function showConfirm(msg,callback){ //var res = false; Modal.confirm( { title:'提示', msg: msg, }).on( function (e) { callback(); //res=true; }); //return res; }
JQuery+bootstrap 模态框,alert、confirm
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script>
JSP 页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!-- system modal start --> <div id="com-alert" class="modal" style="z-index:9999;display: none;" > <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">×</span><span class="sr-only">Close</span></button> <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5> </div> <div class="modal-body small"> <p>[Message]</p> </div> <div class="modal-footer" > <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button> <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button> </div> </div> </div> </div> <!-- system modal end -->
JS
/*** * 模态框封装 */ $(function () { window.Modal = function () { var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); var alr = $("#com-alert"); var ahtml = alr.html(); var _tip = function (options, sec) { alr.html(ahtml); // 复原 alr.find('.ok').hide(); alr.find('.cancel').hide(); alr.find('.modal-content').width(500); _dialog(options, sec); return { on: function (callback) { } }; }; var _alert = function (options) { alr.html(ahtml); // 复原 alr.find('.ok').removeClass('btn-success').addClass('btn-primary'); alr.find('.cancel').hide(); _dialog(options); return { on: function (callback) { if (callback && callback instanceof Function) { alr.find('.ok').click(function () { callback(true) }); } } }; }; var _confirm = function (options) { alr.html(ahtml); // 复原 alr.find('.ok').removeClass('btn-primary').addClass('btn-success'); alr.find('.cancel').show(); _dialog(options); return { on: function (callback) { if (callback && callback instanceof Function) { alr.find('.ok').click(function () { callback(true) }); alr.find('.cancel').click(function () { return; }); } } }; }; var _dialog = function (options) { var ops = { msg: "提示内容", title: "操作提示", btnok: "确定", btncl: "取消" }; $.extend(ops, options); var html = alr.html().replace(reg, function (node, key) { return { Title: ops.title, Message: ops.msg, BtnOk: ops.btnok, BtnCancel: ops.btncl }[key]; }); alr.html(html); alr.modal({ width: 250, backdrop: 'static' }); } return { tip: _tip, alert: _alert, confirm: _confirm } }(); });
相关推荐
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。
Bootstrap弹出框
Bootstrap弹出框水平居中,垂直居中
Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap ...
前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理。总的来说,弹出提示主要分为三种:弹出框、确定取消提示框、信息提示框。本篇就结合这三种类型分别来介绍下它们的使用。 一...
只提供了bootstrap弹出框样式 非常简洁
Bootstrap点击弹出层用户登录窗口模板基于Bootstrap3.3.5制作,简单实用。
1.Bootstrap弹出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">...
好用的 js,bootstrap 城市弹出框
主要介绍了Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
PopConfirm是一款基于bootstrap的jquery弹出层确认框插件。该jquery弹出层确认框插件兼容bootstrap2和bootstrap3。它能够使用bootstrap Popover来替代确认框功能,非常方便。
主要介绍了BootStrap model弹出框的使用,介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧
基于jQuery和Bootstrap的弹出框,替代使用浏览器弹出的警告框,优化后弹出框样式。
主要为大家详细介绍了Bootstrap实现弹出框和提示框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
实现界面的alert和confirm使用bootstrap
Bootstrap4 弹出框 弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle=”popover” 来来创建弹出框。 title 属性的内容为弹...
js重写alert和confirm,alert使用方法未改变,只要引用次js即可改变以往的alert效果