集合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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
你真的了解JavaScript吗?
Feb 24 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
vue项目实现分页效果
Mar 24 Vue.js
微信小程序使用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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP类的特性实例分析
2016/09/28 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
观看信仰心得体会
2014/09/04 职场文书
效能风暴心得体会
2014/09/04 职场文书
销售代理协议书
2014/09/30 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
创业计划书之家教托管
2019/09/25 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python