1、bootstrap模态框之html代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />

    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />

    <link rel="stylesheet" type="text/css" href="./css/style.css" />

    <script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="./js/bootstrap.js"></script>

    <title>分类管理</title>

</head>

<body>

    <div class="container">

        <h2>分类管理</h2>

        <div class="panel panel-default">

            <table class="table  table-striped table-hover">

                <thead>

                    <tr class="info">

                        <td>ID</td>

                        <td>栏目名称</td>

                        <td>操作</td>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>1</td>

                        <td>mysql基础</td>

                        <td>

                            <a href="#infoModal" role="button" data-toggle="modal" data-id="1" data-catename="mysql基础"><i class="fa fa-pencil"></i>修改</a>

                            <a href="#delModal" role="button" data-toggle="modal" data-id="1"><i class="fa fa-trash-o"></i>删除</a>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

　　<!-- 添加分类按钮 -->

   <button class="btn btn-success" data-toggle="modal" data-target="#infoModal" data-id="0"><i class="fa fa-plus"></i>添加分类</button>

　　<!-- 分类删除模态框 -->

    <div class="modal small fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                    <h3 id="myModalLabel">删除确认</h3>

                </div>

                <div class="modal-body">

                    <h4 style="text-align:center;">

	                    <i class="fa fa-warning modal-fa" style="color:red;"></i>

	                    您确认要删除该分类吗？<br />删除该分类的同时会自动删除该分类下面所有的文章。

	                </h4>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-danger" id="delButton" data-account="" data-complete-text="正在删除...">删除</button>

                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">取消</button>

                </div>

            </div>

        </div>

　　</div>

　　<!--添加或修改分类模态框-->

    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

	                    <span aria-hidden="true">×</span>

	                 </button>

                    <h4 class="modal-title" id="exampleModalLabel">添加或修改分类</h4>

                </div>

                <div class="modal-body">

                    <form>

                        <div class="form-group">

                            <label for="catename" class="control-label">分类名称：</label>

                            <input type="text" class="form-control" id="catename" style="width: 84%; display: inline;" />

                        </div>

                    </form>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-primary" id="addoredit">保存</button>

                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

2、、bootstrap模态框之javascript代码

// 全局变量分类ID

var cateid = 0;

// 打开添加、编辑模态框

$('#infoModal').on('show.bs.modal',function(event){

    var button = $(event.relatedTarget);

    var modal = $(this);

    //获取要操作的ID

    cateid = button.data('id');

    if(cateid == 0){

        $('#catename').val('');

    }else{

        //把要修改的分类名称显示出来,更多数据可以通过ajax获取

        $('#catename').val(button.data('catename'));

    }

});
//提交分类添加、修改表单

$('#addoredit').on('click', function () {

    //$(this).button('complete'); //button text will be "finished!"

    var catename = $("#catename").val();

    if (catename == '') {

        alert("请输入分类名称！");

        return;

    }

    var action=cateid==0?'add':'edit';

    $.ajax({

        url:'……',

        type:'post',

        dataType: 'json',

        data:{action:action,cateid:cateid,catename:catename},

        error:function(){

            alert('出现错误！');

        },success:function (data){

            if(data.indexOf('error') < 0){

                $('#infoModal').modal('hide');

                location.reload();

            }else{

                alert(data);

            }

        }

    });

});

// 打开删除分类模态框

$('#delModal').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget);

    cateid = button.data('id');

});
// 提交删除分类

$('#delButton').on('click',function(){

    $(this).button('complete');

    $.ajax({

        url:'',

        type:'post',

        dataType: 'json',

        data:{action:'del',cateid:cateid},

        error:function(){

            alert('出现错误！');

        },success:function(data){

            if (data.indexOf('error') < 0){

                //模态框隐藏

                $('#delModal').modal('hide');

                location.reload();

            }else{

                alert(data);

            }

        }

    });

});

bootstrap模态框传值操作的更多相关文章

  1. Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

    父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...

  2. bootstrap模态框Esc键不关闭

    项目开发时很多时候会需要用到弹出框,而且很多框架都有自己的弹出框,比较现在很流行的bootstrap就有模态框(model). 很多时候这东西用起来非常方便,可以为开发省去很多自己定义的时间!最近项目 ...

  3. 基于bootstrap模态框的alert弹窗

    完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...

  4. 第二百四十三节，Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一．基本使用 使用模态框 ...

  5. [bootstrap]模态框总结

    <!--data-backdrop禁止点击空白处关闭模态框,也可以js设置,其他参数可参考官网模态框文档--> <div class="modal fade" i ...

  6. Bootstrap, 模态框实现值传递,自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

  7. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  8. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  9. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

随机推荐

  1. 标准c库函数和linux系统函数的关系

    c库IO函数的工作流程 c库函数与系统函数的关系 虚拟地址空间 文件描述符

  2. css 简单梯形

    通过css2D变形我们可以轻松得到平行四边形,那么通过此技巧可以得到梯形吗? no! 不过我们可以通过3D旋转得到类似这样的效果: transform:perspective(0.5em)  rota ...

  3. 针对 IE的 的优化

    针对 IE 的优化 有些时候,你需要对 IE 浏览器的 bug 定义一些特别的规则,这里有太多的 CSS 技巧(hacks),我只使用其中的两种方法,不 管微软在即将发布的 IE7 beta 版里是否 ...

  4. shell定时采集数据到HDFS

    上线的网站每天都会产生日志数据.假如有这样的需求:要求在凌晨 24 点开始操作前一天产生的日志文件,准实时上传至 HDFS 集群上. 该如何实现?实现后能否实现周期性上传需求?如何定时? Linux ...

  5. day007-线程池、Lambda

    1. 线程池 就好生活中的游泳池,可以容纳多人在池子里游泳.戏水.线程池里可以有多个正在运行的线程,同时执行已经提交了的多个任务. 什么是线程池?一个用来创建和管理线程的容器. 线程池的原理 线程复用 ...

  6. java之大文件断点续传

    针对某些场景下,面对服务文件大,或者服务端服务器不稳定时使用该模块.功能代码如下: import java.io.File; import java.io.FileOutputStream; impo ...

  7. day6-基础 装饰器，生成器，迭代器

    1.装饰器 定义:给其他函数装饰(添加附加功能)的函数 原则:1.不能修改被装饰的函数的源代码.    2.不能修改北庄施的函数的调用方式 实现所需要求:1.函数即便量    2.高阶函数 3.嵌套函 ...

  8. Oracle 通过undo块查看事务信息

    数据库版本:Oracle 11.2.0.3 RAC 实验目的:通过undo块查看Oracle事务信息 实验细节:1 开始一个事务SQL> select * from t1; ID NAME--- ...

  9. SQA计划和测试规程

    一.SQA计划 (一)目的 本计划的目的是定义我们该小组所做的“云医院”项目的SQA任务和职责,在项目过程中应遵循的流程.规范和约定等,以确保软件质量得到维持. (二)范围 本计划应用于“云医院”项目 ...

  10. ABAP OPEN SQL里OPEN CURSOR和SELECT的比较

    OPEN CURSOR After the OPEN CURSOR statement, the database cursor is positioned in front of the first ...