關於bootstrap模態框（model）彈出新窗口（靜態，遠程）的相關問題，包括傳遞參數

1.同一個頁面打開靜態模態框（Model），按照官方例子就行了，其他網站都不怎麼全，會導致看不懂，以下爲官網地址

https://getbootstrap.com/docs/4.4/components/modal/

需要特殊說明的，傳遞參數，靜態模態框的方式如下：（官方例子），具體的參數以及方法可以查看官方文檔

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

2.往往我們需求不那麼簡單，需要打開動態模版表單，或者稱之爲遠程表單；

依然直接上代碼：

<button id="btn_openUpload" type="button" class="btn btn-outline-info" data-toggle="modal" data-remote="uploadFile.html" data-user="張三" data-target="#myModal">打開Model</button>

<!-- 彈出模態窗口--> 
        <div class="modal fade" style="top:13%;" role="dialog" id="myModal" data-admin="" aria-hidden="true" data-backdrop="static">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                <!-- 內容會加載到這裏 -->
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

$('#myModal').on('hidden.bs.modal', function (e) {
	   $(this).find('.modal-body').html(' 等待結果，請稍後...');
	   $(this).removeData('bs.modal');
	 }).on('show.bs.modal', function (e) {
	   var button = $(e.relatedTarget);
	   var modal = $(this);
	   var recipient = button.data('user') // Extract info from data-* attributes
	   modal.find('.modal-body input').val(recipient)
	   modal.find('.modal-content').backdrop='static';
	   modal.find('.modal-content').keyboard=false;
	   modal.find('.modal-content').load(button.data("remote"),function(){
		   $("#recipient-name").val(recipient);
		});
	 });

【特殊說明】：此處使用的bootstrap版本爲4.x，所以可能之前3的方式不再適用，此處打開窗口使用的jquery的load加載方法，按照API查看

完整語法格式：load( url, [data], [callback] )
/*參數:
url是指要導入文件的地址。
data：可選參數；因爲load不僅僅可以導入靜態的html文件，還可以導入動態腳本，例如PHP文件，所以要導入的是動態文件時，我們可以把要傳遞的參數放在這裏。
callback：可選參數；是指調用load方法並得到服務器響應後，再執行的另外一個函數。*/

1、URL是遠程服務器地址，後臺用request方式獲取，此處不再贅述；

2、URL爲JSP頁面，傳遞方式和遠程服務地址一致，jsp頁面通過如下方式獲取

a.jsp中的js寫到load("b.jsp",json)，這樣b.jsp中的頁面<%=request.getParameter("name")%>就可以直接獲取了

2、URL是靜態html地址，傳遞方式爲

$("#pageshow").load(b.html,function(){

   $("#b_id").val(id)  //b_id是b.html頁面的一個隱藏input域

})

PS：此處還是思維侷限了，處理方式一直在bootstrap裏面，跳槽思維侷限，通過jquery和js的方式來處理也是一樣的，畢竟也是依賴與js和jquery，另外打開遠程表單的方式通過官方給的方法是傳遞不了參數或者賦值不能成功（網上好多例子都是按照官方的方式來的）

以下是參考幾位大佬連接：

https://www.jb51.net/article/144129.htm

https://blog.csdn.net/lvwkpt/article/details/85337309