前端~~~~前端~~~最近用到模态框,一些心得特此记录一下。
基础用法
直接看菜鸟的吧 传送门
如何将点击行的id传入到模态框中
研究了几种方式最后决定给标签添加点击事件,手动开启模态框,这样既解决的模态框中默认值的问题,同时也解决了模态框自带id。
思路:
- 通过点击事件,获取到当前标签对象。
- 根据对象使用父类的方式查找到tr标签对象。
- 根据索引获取对应值的Text文本信息。
- 为每个模态框中的input标签设置id。
- 根据id将文本信息对应赋值给input标签。
直接上代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<button onclick="click_model(this)" type="button" id="{{ i.id }}" class="btn btn-xs btn-success btn-edit" data-toggle="modal"> 编辑 </button>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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">×</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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>