Bootstrap模态框

前端~~~~前端~~~最近用到模态框，一些心得特此记录一下。

基础用法

直接看菜鸟的吧 传送门

如何将点击行的id传入到模态框中

研究了几种方式最后决定给标签添加点击事件，手动开启模态框，这样既解决的模态框中默认值的问题，同时也解决了模态框自带id。

 思路：

• 通过点击事件，获取到当前标签对象。
• 根据对象使用父类的方式查找到tr标签对象。
• 根据索引获取对应值的Text文本信息。
• 为每个模态框中的input标签设置id。
• 根据id将文本信息对应赋值给input标签。

 直接上代码：

            <button onclick="click_model(this)" type="button"
                    id="{{ i.id }}" class="btn btn-xs btn-success btn-edit" data-toggle="modal">
                编辑
            </button>

<style>
        .modal-body {
            padding: 20px 30px 63px 30px;
        }
    </style>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <form method="POST" action="/cmdb/items_etail/" class="form-horizontal">
            <div class="modal-dialog" role="document">
                <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="myModalLabel">编辑页面</h4>
                    </div>
                    <div class="modal-body">
                        {% csrf_token %}
                        <div class="hidden">
                            <label for="edit_Id" class="control-label col-sm-3 col-lg-3">项目Id</label>
                            <div class="col-sm-8 col-lg-8">
                                <input type="text" class="form-control" id="item_id" name="item_id">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edit_Id" class="control-label col-sm-3 col-lg-3">项目名称</label>
                            <div class="col-sm-8 col-lg-8">
                                <input type="text" class="form-control" id="item_name" name="item_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edit_Id" class="control-label col-sm-3 col-lg-3">描述</label>
                            <div class="col-sm-8 col-lg-8">
                                <input type="text" class="form-control" id="item_comment" name="item_comment">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <input type="submit" class="btn btn-primary" value="提交">
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script>
        function click_model(obj) {
            var list = obj.parentNode.parentNode.children; // 根据当前点击标签找到tr标签
            var name = list[1].innerText;   // tr标签可以通过索引取值获取对应的值
            var comment = list[4].innerText;
            document.getElementById("item_id").value = obj.id;   //根据模态框中定义的input标签ID对input标签重新赋值
            document.getElementById("item_name").value = name;
            document.getElementById("item_comment").value = comment;
            $('#myModal').modal('show');   //手动打开方式
        }

    </script>