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

时间：2023-03-08 19:18:41
JS学习笔记(模态框JS传参)

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

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

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

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

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

上前端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>

相关文章