JS学习笔记(模态框JS传参)

博主最近基于django框架的平台第一版差不多完成了

今天整理下开发过程中遇到的前端知识

基于前端bootstrap框架模态框传参问题

上前端html代码：

       <div class="modal modal-info fade" id="modal-info">
           <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">确认</h4>
               </div>
               <div class="modal-body">
                 <p>是否确认运行任务</p>
               </div>
               <div class="modal-footer">
                 <a href="#" class="btn btn-outline pull-left" id="path">确认</a>
                 <button type="button" class="btn btn-outline " data-dismiss="modal">取消</button>
               </div>
             </div>
             <!-- /.modal-content -->
           </div>
           <!-- /.modal-dialog -->
       </div>
       <!-- /.modal -->

上js代码：

 <script>
 $('#modal-info').on('show.bs.modal', function (event) {
     var btnThis = $(event.relatedTarget); //触发事件的按钮
     var modal = $(this);  //当前模态框
     var id = btnThis.data('id');   //解析出data-id的内容
     var path = '/run/{{ project_id }}/'+id;  //组装路由
     console.log('taskId:', id);
     console.log('path:', path);
     document.getElementById("path").href=path; //给id=path的元素赋值href;
 }); 

 </script>