两个bootstrap模态框，一个可以正常显示，另一个无法显示

一、TP版本：5.1.41
二、要实现的功能：
通过jq，控制模态框的显示与隐藏
如果满足条件一：模态框一显示，模态框二隐藏
如果满足条件二：模态框二显示，模态框一隐藏
实现方法：
1.两个模态框外层都添加一个div
2.加上一句jq代码：jQuery.noConflict();

<button id='showmodal' type="button" class="btn btn-xs" data-toggle="modal" data-target="#myModal">打开模态框1</button>
<button id='showmodalt' type="button" class="btn btn-xs" data-toggle="modal" data-target="#myModalt">打开模态框2</button>
<!-- 模态框1 -->
<div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        省略部分代码.....
    </div>
</div><!-- 模态框1外层的div -->
<!-- 模态框2 -->
<div>
     <div class="modal fade" id="myModalt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_t" aria-hidden="true">
        省略部分代码.....
    </div>
</div><!-- 模态框2外层的div -->
<script>
//加上这句
jQuery.noConflict();
$(document).ready(function (){
   var url=window.location.href;
   if(url.indexOf('flag=true')>-1){
       //关闭模态框2，打开模态框1
       $("#myModalt").modal('hide');
       $('#showmodal').trigger('click');
   }
   if(url.indexOf('flag=false')>-1){
       //关闭模态框1，打开模态框2
       $("#myModal").modal('hide');
       $('#showmodalt').trigger('click');
   }
});
</script>

百度有的人只加外层div就可以，有的人只需要加jQuery.noConflict();而我的必须两个都加，才能正常运行；目前尚不明白其中的原理和原因