Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
403e22b9
Z
zui
项目概览
易企天创
/
zui
12 个月 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
403e22b9
编写于
8月 28, 2014
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* updated modal.trigger.js: added oncemodal.
上级
b7adcad9
变更
4
展开全部
隐藏空白更改
内联
并排
Showing
4 changed file
with
391 addition
and
252 deletion
+391
-252
docs/example/modals.html
docs/example/modals.html
+7
-3
src/js/modal.trigger.js
src/js/modal.trigger.js
+299
-189
src/less/basic/variables.less
src/less/basic/variables.less
+6
-1
src/less/modules/modals.less
src/less/modules/modals.less
+79
-59
未找到文件。
docs/example/modals.html
浏览文件 @
403e22b9
...
...
@@ -6,7 +6,7 @@
<link
href=
"../css/example.css"
rel=
"stylesheet"
>
<script
src=
"../../assets/jquery.js"
></script>
<script
src=
"../../dist/js/zui.
min.
js"
></script>
<script
src=
"../../dist/js/zui.js"
></script>
<link
href=
"../css/example.css"
rel=
"stylesheet"
>
...
...
@@ -98,7 +98,9 @@
</div>
<!-- /.modal -->
<h4>
框架对话框触发器
</h4>
<a
href=
"alerts.html"
data-toggle=
'modal'
class=
'btn btn-success'
><i
class=
'icon-heart'
></i>
打开框架对话框
</a>
<a
href=
"alerts.html"
data-type=
'iframe'
data-toggle=
'modal'
class=
'btn btn-success'
><i
class=
'icon-heart'
></i>
打开框架对话框
</a>
<br>
<a
href=
"partial/dialog.html"
data-type=
'ajax'
data-toggle=
'modal'
class=
'btn btn-success'
><i
class=
'icon-heart'
></i>
打开ajax对话框
</a>
<h3>
变化
</h3>
<h4>
选项
</h4>
...
...
@@ -273,7 +275,9 @@
remote
:
"
partial/dialog.html
"
,
backdrop
:
'
static
'
})
})
});
// window.onbeforeunload = function(){return 'fdsfd'};
})
</script>
</section>
...
...
src/js/modal.trigger.js
浏览文件 @
403e22b9
此差异已折叠。
点击以展开。
src/less/basic/variables.less
浏览文件 @
403e22b9
...
...
@@ -396,7 +396,7 @@
// MODALS
// -------------------------
@modal-inner-padding:
20
px;
@modal-inner-padding:
15
px;
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
...
...
@@ -408,6 +408,11 @@
@modal-backdrop-bg: #000;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
@modal-backdrop-opacity: .5;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
// ALERTS
...
...
src/less/modules/modals.less
浏览文件 @
403e22b9
...
...
@@ -8,130 +8,150 @@
// .modal-content - actual modal w/ bg and corners and shit
// Kill the scroll on the body
.modal-open
{
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal
{
.modal {
display: none;
overflow: auto;
overflow-y: auto;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
//
When fading in the modal, animate it to slide down
&.fade .modal-dialog { .translate(0, -25%); .transition-transform(~"0.3s ease-out"); }
&.in .modal-dialog { .translate(0, 0)}
//
Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
.loader {display: none}
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
.translate3d(0, -25%, 0);
.transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate3d(0, 0, 0) }
> .loader {display: none}
&.modal-loading
{
.modal-dialog {margin-top: -100%!important;
}
.loader{position: absolute; display: block; text-align: center; font-size: 56px; color: #fff; top: 35%; width: 100%}
.modal-dialog {opacity: 0
}
.loader{position: absolute; display: block; text-align: center; font-size: 56px; color: #fff; top: 35%; width: 100%}
}
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
// Shell div to position the modal with bottom padding
.modal-dialog
{
margin-left: auto;
margin-right: auto;
.modal-dialog {
position: relative;
width: auto;
z-index: (@zindex-modal-background + 10);
margin: 10px;
}
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-
bas
e;
border-radius: @border-radius-
larg
e;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: none;
&.fullscreen
{
width: 100% !important;
height: 100% !important;
margin: 0;
border: none !important;
border-radius: none;
> .modal-body iframe {height: 100%}
}
&.modal-iframe .modal-body {padding: 0}
outline: 0;
}
// Modal background
.modal-backdrop
{
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:
(@zindex-modal-background - 10)
;
z-index:
@zindex-modal-background
;
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(
.5
); }
&.in { .opacity(
@modal-backdrop-opacity
); }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header
{
.modal-header {
padding: @modal-title-padding;
border-bottom: 1px solid @modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height);
}
// Close icon
.modal-header .close { margin-top: -2px; }
.modal-header .close {
margin-top: -2px;
}
// Title text within header
.modal-title { margin: 0; line-height: @modal-title-line-height; }
.modal-title {
margin: 0;
line-height: @modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body { position: relative; padding: @modal-inner-padding; }
.modal-body {
position: relative;
padding: @modal-inner-padding;
}
// Footer (for actions)
.modal-footer
{
margin-top: 15px;
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
.modal-footer {
padding: @modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
.clearfix(
); // clear it in case folks use .pull-* classes on buttons
&:extend(.clearfix all
); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn
{
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
// but override that for button groups
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block { margin-left: 0; }
.btn-block + .btn-block {
margin-left: 0;
}
}
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
// Scale up the modal
@media
screen and (min-width: @screen-tablet)
{
.modal-dialog
{
width: 75%
;
margin-top: 30px;
margin-bottom: 30px;
@media
(min-width: @screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog
{
width: @modal-md;
margin: 30px auto
;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
}
// Modal sizes
.modal-sm { width: @modal-sm; }
}
@media (min-width: @screen-md-min) {
.modal-lg { width: @modal-lg; }
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录