bootstrap 模态窗modal共同导致冲突的问题

我们公司有一个比较老的项目，前端组件是用的bootstrap的组件库，form表单的弹窗都是用的bootsrap提供的模态窗。
但是我们不是一个模块功能就新建一个modal，都是公用的一个公共的modal。部分代码如下：
在index.html中有一个modal

<div id="remoteModal" class="modal fade" tabindex="-1" role="dialog"
         aria-labelledby="remoteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            </div>
        </div>
    </div>

在其他模块使用：

image.png

我们项目这样写，其实是在点击按钮的瞬间弹窗已经显示出来了。
然后有一个需求时这样的：
页面有修改和管理两个按钮；
点击管理按钮如果身份是0，就要去请求接口，根据接口返回的数据确定，如果返回数据true就弹表单窗口，如果返回false就报错。
点击修改按钮，直接展示修改按钮。
如果按照以上写法，直接写两个operation，比如：

image.png

onManage 方法：正常的逻辑就是判断角色身份，然后去请求，页面做出动作响应。
onEdit：直接弹窗
这样实际两个modal会冲突，混乱，乱显示。还会出现多层遮罩。
因为modal不会等你请求借口后显示，会直接弹窗。
知道了这个问题，那么我们就应该知道，Manage的表安弹窗不应该由管理按钮来触发

想到这里就很简单了，我们可以创建一个隐藏按钮，用来触发管理modal，然后用管理按钮去手动触发隐藏按钮的事件。
代码如下：

image.png
image.png

问题顺利解决！！
其实遇到问题不要慌，先复现问题，定位到问题，然后找到问题出现的原因，知道原因了，那么找解决这个问题的方法就很简单了。