集合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 读取和设置文档元素的样式属性
Apr 14 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
Vue计算属性的使用
Aug 04 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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模块 Memcached功能多于Memcache
2011/06/14 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
php判断目录存在的简单方法
2019/09/26 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
Angular2之二级路由详解
2018/08/31 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
六十大寿答谢词
2014/01/12 职场文书
大学生毕业求职信
2014/06/12 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书