party_bid下的第四张卡应用到了模态框,因为没有接触过这个,所以去网上查了一下,Modals就是一个样式,丰富用户体验。首先需要引入三个文件:bootstrap.css、jquery、bootstrap.js,然后在haml里面写入代码
.modal.fade#myModalSucceed//定义id,并且让模态框退色及是页面颜色变暗
.modal-dialog//引入对话框
.modal-content//写入内容
.modal-header
%button(type="button" class="close" data-dismiss="modal" aria-hidden="true") ×
.modal-title.question_size
.modal-body
%div(style='text-align:center')
%div
%h4
竞价成功
.modal-footer
%h4.text-center(style="font-size: 30px" )
竞价结果
然后在controller里面控制合适显示合适隐藏
$timeout(function () {
$('#myModalSucceed').modal('show');//将指定的内容作为模态框自动打开。
$timeout(function () {
竞价结果;//模态框隐藏后显示
$('#myModalSucceed').modal('hide');//将指定的内容作为模态框3秒后自动隐藏。
}, 3000)
}, 1)
注意:模态框不允许重叠,想显示多个模态框,必须重新写代码。我有两种情况显示模态框,所以就写了两个。