Model弹框
vue.js Model弹框
安装bootstrapvue插件才可以使用
bootstrapVue官网:https://bootstrap-vue.js.org/docs/
html页面
<b-button v-b-modal.logoutMessageBox>Launch demo modal</b-button>
<b-modal id="logoutMessageBox" centered hide-header ok-title="确定" cancel-title="取消">
<h5>请完善用户信息</h5>
</b-modal>
Css样式
#logoutMessageBox .modal-content {
margin: 0 auto;
width: 90%;
}
#logoutMessageBox h5 {
text-align: center;
}
#logoutMessageBox .modal-body {
padding: 25px 0;
}
#logoutMessageBox footer {
padding-top: 5px;
padding-bottom: 7px;
}
#logoutMessageBox footer button {
width: 100%;
background: #fff;
border: 0px;
color: black;
}
#logoutMessageBox footer .btn-primary {
border-left: 1px solid rgb(222, 226, 230);
border-radius: 0;
}
效果图