模态框
模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭,还有固定时间自动消失等,可根据需要自行设计。
使用模态框需先在index.haml(针对rubymine开发工具)下引入下列两个js(注意先后顺序):
%script(lang="javascript" src="lib/js/jquery/jquery-1.8.2.min.js") %script(lang="javascript" src="lib/js/angular/bootstrap.js")
haml代码:
.modal.fade#myModalname .modal-dialog .modal-content .modal-header %button.close(aria-hidden = "true" data-dismiss = "modal" type = "button") × %h4.modal-title .modal-body %center 可编辑内容 .modal-footer
对应html代码:
<div class="modal fade ng-scope" id="myModalname"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> <center> 可编辑内容 </center> </div> </div> </div> </div>
js方法 :
$timeout(function () { $('#ModalFalse').modal('show'); $timeout(function () { $('#ModalFalse').modal('hide'); }, 3000) }, 1)
#myModalname页面的一个id,用于页面数据绑定显示;
加入$timeout实现页面模态框按设定时间自动关闭,3000代表3秒,单位为毫秒
同时在js主方法加入$timeout
function BidResultController($scope, $navigate, $timeout) { 方法体; }
简单效果图:
相关推荐
bootstrap模态框+jSignature签字版功能Demo jSignature 在网页上手写签名的插件(html5手写签名) 在IE7~IE8这种不支持HTML5的浏览器上,是利用Flash嵌入的方式实现的签名处理; 在支持的HTML5的浏览器上默认采用...
bootstrap模态框弹出效果是一款15种模态框弹出效果代码。
百度图片上传插件在bootstrap模态框中按钮失效解决方法!
用原生JavaScript和CSS3共同实现bootstrap模态框效果。
bootstrap模态框的15种不同的特效,很好爱的发声发呢嘎达股份的嘎嘎嘎德国阿嘎多哈哈地方深粉色发发斯蒂芬
15种bootstrap模态框动画弹出特效 兼容性好 bootstrap
Bootstrap响应式模态登录框插件,jQuery基于Bootstrap制作的一款响应式模态登录框插件,点击遮罩弹出登录窗口代码。
主要介绍了BootStrap 模态框实现刷新网页并关闭的功能,实现方法简单易懂,需要的朋友可以参考下
主要为大家详细介绍了Bootstrap模态框(Modal)实现过渡效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
简易仿bootstrap模态框多步骤特效.zip
在iframe内使用bootstrap模态框时,模态框无法遮罩父页面,从而产生bug,此资源通过绑定一个 parent()事件这罩住父页面的菜单
这是一款bootstrap模态窗口美化特效。该特效在原生bootstrap模态窗口的基础上,通过添加自定义的CSS样式,制作出效果非常炫酷的模态窗口。
主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
bootstrap模态框提示弹窗和多弹窗优化, 最近一直在用bootstrap开发前端,也是比较苦恼。 开发中纠结于没有公共的标准提示弹窗,所以只能自己写一个(能力不是很好。。第一次造轮子,也不知道算不算轮子)
模态框(Modal)是覆盖在父窗体上的子窗体。...以上所述是小编给大家介绍的Bootstrap 模态框(Modal)带参数传值实例,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的
Maven 基于SSM框架的增删改(使用了bootstrap的模态框,分页插件pagehelper, ajax等,附sql文件)
Bootstrap-模态框- 解析: http://blog.csdn.net/yy228313/article/details/50763048