关于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.youkuaiyun.com/lvwkpt/article/details/85337309