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>