集合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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
Vue内部渲染视图的方法
Sep 02 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
jquery 插件学习(五)
2012/08/06 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python处理文本换行符实例代码
2018/02/03 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python实现贪吃蛇小游戏
2020/03/21 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
python如何绘制疫情图
2020/09/16 Python
30年同学聚会邀请函
2014/01/25 职场文书
运动会入场式解说词
2014/02/18 职场文书
高中生学习计划书
2014/09/15 职场文书
党委领导班子整改方案
2014/09/30 职场文书
国庆阅兵观后感
2015/06/15 职场文书
超市店长竞聘书
2015/09/15 职场文书
导游词之张家口
2019/12/13 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript