集合Bootstrap自定义confirm提示效果


Posted in Javascript onSeptember 19, 2017

本文实例为大家分享了集合Bootstrap自定义confirm的具体代码,供大家参考,具体内容如下

效果

这里写图片描述

js端

var Common = {
  confirm:function(params){
    var model = $("#common_confirm_model");
    model.find(".title").html(params.title)
    model.find(".message").html(params.message)

    $("#common_confirm_btn").click()
    //每次都将监听先关闭,防止多次监听发生,确保只有一次监听
    model.find(".cancel").die("click")
    model.find(".ok").die("click")

    model.find(".ok").live("click",function(){
      params.operate(true)
    })

    model.find(".cancel").live("click",function(){
      params.operate(false)
    })
  }
}

html端

<input type="hidden" id="common_confirm_btn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#common_confirm_model">
<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">×</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>

调用

Common.confirm({
   title: "标题",
   message: "内容",
   operate: function (reselt) {
     if (reselt) {
       ........
     } else {
       ........
     }
   }
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 复制数组实现代码
Nov 26 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
Javascript 面向对象 继承
May 13 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
vue内置指令详解
Apr 03 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
微信小程序使用Socket的实例
Sep 19 #Javascript
vue基于Element构建自定义树的示例代码
Sep 19 #Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 #Javascript
详解ES6之async+await 同步/异步方案
Sep 19 #Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 #Javascript
You might like
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python中的元类编程入门指引
2015/04/15 Python
python实现聚类算法原理
2018/02/12 Python
python sys.argv[]用法实例详解
2018/05/25 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
c++工程师面试问题
2013/08/04 面试题
宣传部部长竞选演讲稿
2014/04/26 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
通知范文怎么写
2015/04/16 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
4种非常实用的python内置数据结构
2021/04/28 Python
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript