bootstrap模态框传值操作

来源：互联网发布：会计软件怎么用编辑：程序博客网时间：2024/06/06 01:24
<!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">&times;</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>    <script type="text/javascript">        var cateid = 0;        $('#infoModal').on('show.bs.modal',function(event){            var button = $(event.relatedTarget);            var modal = $(this);            cateid = button.data('id');//获取要操作的ID            if(cateid == 0){                $('#catename').val('');            }else{                //把要修改的分类名称显示出来                $('#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',                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',                data:{action:'del',cateid:cateid},                error:function(){                    alert('出现错误！');                },                success:function(data){                    if (data.indexOf('error') < 0){                        //模态框隐藏                        $('#delModal').modal('hide');                        location.reload();                    }else{                        alert(data);                    }                }            });        });    </script></body></html>
阅读全文
0 0