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>