Jquery 模態對話框 數據傳遞問題

昨天在用bootstrap 和 jquery 做網頁的模態對話框時, 可以通過按鈕的設置傳遞參數到模態對話框.

效果可參考鏈接: http://v3.bootcss.com/javascript/#modals-related-target 

上面的例子中 嵌入了 jquery.min.js  和 docs.min.js 兩個js文件 , 傳遞參數的js函數是在doc中實現的

如果要做自己的form表單傳遞很多參數 則需要修改js 函數.

具體步驟如下:

1. button 參數

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#AddColorInfo" data-whatever='1000'>新增顏色</button>

2. 模態對話框

<div class="modal fade" id="AddColorInfo" tabindex="-1" role="dialog"
   aria-labelledby="AddColorInfoLabel" aria-hidden="false">

   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="AddColorInfoLabel">
               添加顏色信息
            </h4>
         </div>

         <div class="modal-body">           
            <form class="form-horizontal" role="form">
               <div class="form-group">

                  <label for="colorName" class="col-sm-4 control-label">顏色名稱</label>
                  <div class="col-sm-4">
                  <input type="text" class=" form-control" id="colorName" placeholder="顏色名稱">
                  </div>
               </div>               

               <div class="form-group">
                  <div class="col-sm-offset-4 col-sm-8">
                     <button type="submit" class="btn btn-default">確定</button>
                  </div>
               </div>
            </form>

         </div>

 

3. js函數

<script type="text/javascript">
        $('#AddColorInfo').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget) // Button that triggered the modal
          var recipient = button.data('whatever') // 從button 的 data-* 屬性獲取參數值
          var modal = $(this)
          // modal.find('.modal-title').text('New message to ' + recipient)
          // modal.find('.modal-body input').val(recipient)
          modal.find('#colorName').val(recipient) //  找到 colorName 並賦值
        })
    </script>

 

這里需要注意的是 js函數必須 放在 jquery.min.js 引入之后, 否則不能實現參數的傳遞效果.

 

之前查了一下 似乎還有更簡單的方式 , 但是還沒有搞清楚怎么用