作者 Karson

修复Layer全局污染的问题

修复错误提交的插件配置
修复iOS下页面底部点击的BUG
优化弹出窗无标题时关闭按钮的显示
... ... @@ -50,6 +50,13 @@ body.is-dialog {
/*width: 70%;*/
max-width: 885px;
}
/*iOS兼容*/
html.ios-fix,
html.ios-fix body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.content {
min-height: 500px;
}
... ... @@ -70,15 +77,6 @@ body.is-dialog {
height: 100%;
width: 100%;
}
.tab-addtabs.ios-iframe-fix .tab-pane {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.layui-layer-iframe .layui-layer-content.ios-iframe-fix {
-webkit-overflow-scrolling: touch;
overflow: auto;
overflow-y: auto!important;
}
@media only screen and (min-width: 481px) {
.row-flex {
display: flex;
... ... @@ -576,59 +574,59 @@ table.table-template {
-moz-box-shadow: 0 0 3px #eee;
box-shadow: 0 0 3px #eee;
}
.layui-layer-title {
.layui-layer-fast {
/*自定义底部灰色操作区*/
}
.layui-layer-fast .layui-layer-title {
background: #2c3e50!important;
color: #fff!important;
border-bottom: none;
}
/*避免出现多滚动条*/
.layui-layer-noborder {
.layui-layer-fast .layui-layer-title ~ .layui-layer-setwin {
top: 0px;
height: 42px;
}
.layui-layer-fast .layui-layer-title ~ .layui-layer-setwin > a {
height: 42px;
line-height: 42px;
display: inline-block;
}
.layui-layer-fast.layui-layer-border {
border: none!important;
box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3) !important;
}
.layui-layer-moves {
.layui-layer-fast .layui-layer-moves {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.layui-layer-iframe {
overflow: hidden!important;
}
.layui-layer-iframe .layui-layer-content {
-webkit-overflow-scrolling: touch;
overflow-y: hidden!important;
overflow: hidden;
}
/*自定义底部灰色操作区*/
.layui-layer-btn {
.layui-layer-fast .layui-layer-btn {
text-align: center!important;
padding: 10px!important;
background: #ecf0f1;
}
.layui-layer-footer {
padding: 8px 20px;
background-color: #ecf0f1;
height: auto;
text-align: inherit!important;
}
.layui-layer-btn a {
.layui-layer-fast .layui-layer-btn a {
background-color: #95a5a6!important;
border-color: #95a5a6!important;
color: #fff!important;
}
.layui-layer-btn .layui-layer-btn0 {
.layui-layer-fast .layui-layer-btn .layui-layer-btn0 {
background-color: #18bc9c!important;
border-color: #18bc9c!important;
}
.layui-layer-setwin {
top: 10px!important;
.layui-layer-fast .layui-layer-footer {
padding: 8px 20px;
background-color: #ecf0f1;
height: auto;
text-align: inherit!important;
}
.layui-layer-setwin > a {
.layui-layer-fast .layui-layer-setwin > a {
background: none!important;
}
.layui-layer-setwin > a cite {
.layui-layer-fast .layui-layer-setwin > a cite {
display: none;
}
.layui-layer-setwin > a:after {
.layui-layer-fast .layui-layer-setwin > a:after {
content: "\e625";
font-family: iconfont;
font-style: normal;
... ... @@ -640,31 +638,42 @@ table.table-template {
margin: 0;
z-index: 1;
}
.layui-layer-setwin > a:hover {
.layui-layer-fast .layui-layer-setwin > a:hover {
text-decoration: none!important;
background: none!important;
}
.layui-layer-setwin > a:focus {
.layui-layer-fast .layui-layer-setwin > a:focus {
text-decoration: none!important;
}
.layui-layer-setwin .layui-layer-min:after {
.layui-layer-fast .layui-layer-setwin .layui-layer-min {
display: none;
}
.layui-layer-fast .layui-layer-setwin .layui-layer-min:after {
content: "\e625";
}
.layui-layer-setwin .layui-layer-max:after {
.layui-layer-fast .layui-layer-setwin .layui-layer-max {
display: none;
}
.layui-layer-fast .layui-layer-setwin .layui-layer-max:after {
content: "\e623";
}
.layui-layer-setwin .layui-layer-maxmin:after {
.layui-layer-fast .layui-layer-setwin .layui-layer-maxmin {
display: none;
}
.layui-layer-fast .layui-layer-setwin .layui-layer-maxmin:after {
content: "\e624";
}
.layui-layer-setwin .layui-layer-close1:after {
.layui-layer-fast .layui-layer-setwin .layui-layer-close1:after {
content: "\e626";
}
.layui-layer-setwin .layui-layer-close2,
.layui-layer-setwin .layui-layer-close2:hover {
.layui-layer-fast .layui-layer-setwin .layui-layer-close2,
.layui-layer-fast .layui-layer-setwin .layui-layer-close2:hover {
background: url('../libs/layer/build/skin/default/icon.png') no-repeat -149px -31px !important;
top: -30px;
right: -30px;
}
.layui-layer-setwin .layui-layer-close2:after,
.layui-layer-setwin .layui-layer-close2:hover:after {
.layui-layer-fast .layui-layer-setwin .layui-layer-close2:after,
.layui-layer-fast .layui-layer-setwin .layui-layer-close2:hover:after {
display: none;
}
@media (min-width: 768px) {
... ...
... ... @@ -66,6 +66,10 @@ define(['fast', 'moment'], function (Fast, Moment) {
},
init: function () {
//公共代码
//添加ios-fix兼容iOS下的iframe
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
$("html").addClass("ios-fix");
}
//配置Toastr的参数
Toastr.options.positionClass = Config.controllername === 'index' ? "toast-top-right-index" : "toast-top-right";
//点击包含.btn-dialog的元素时弹出dialog
... ...
... ... @@ -181,11 +181,6 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'adminlte', 'form'], functi
//绑定tabs事件
$('#nav').addtabs({iframeHeight: "100%"});
//修复iOS下iframe无法滚动的BUG
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
$(".tab-addtabs").addClass("ios-iframe-fix");
}
if ($("ul.sidebar-menu li.active a").size() > 0) {
$("ul.sidebar-menu li.active a").trigger("click");
} else {
... ...
... ... @@ -126,7 +126,6 @@ define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, undefine
area: area,
content: url,
zIndex: Layer.zIndex,
skin: 'layui-layer-noborder',
success: function (layero, index) {
var that = this;
//存储callback事件
... ... @@ -159,9 +158,9 @@ define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, undefine
}
}
}, options ? options : {});
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && top.$(".tab-pane.active").size() > 0) {
if ($(window).width() < 480 || (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && top.$(".tab-pane.active").size() > 0)) {
options.area = [top.$(".tab-pane.active").width() + "px", top.$(".tab-pane.active").height() + "px"];
options.offset = [ top.$(".tab-pane.active").scrollTop() + "px", "0px"];
options.offset = [top.$(".tab-pane.active").scrollTop() + "px", "0px"];
}
Layer.open(options);
return false;
... ... @@ -205,7 +204,7 @@ define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, undefine
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
var titHeight = layero.find('.layui-layer-title').outerHeight() || 0;
var btnHeight = layero.find('.layui-layer-btn').outerHeight() || 0;
$("iframe", layero).parent().addClass("ios-iframe-fix").css("height", layero.height() - titHeight - btnHeight);
$("iframe", layero).parent().css("height", layero.height() - titHeight - btnHeight);
$("iframe", layero).css("height", "100%");
}
},
... ... @@ -282,6 +281,9 @@ define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, undefine
setting.url = Fast.api.fixurl(setting.url);
}
});
Layer.config({
skin: 'layui-layer-fast'
});
// 绑定ESC关闭窗口事件
$(window).keyup(function (e) {
if (e.keyCode == 27) {
... ...
... ... @@ -2051,7 +2051,6 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
area: area,
content: url,
zIndex: Layer.zIndex,
skin: 'layui-layer-noborder',
success: function (layero, index) {
var that = this;
//存储callback事件
... ... @@ -2084,9 +2083,9 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
}
}
}, options ? options : {});
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && top.$(".tab-pane.active").size() > 0) {
if ($(window).width() < 480 || (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && top.$(".tab-pane.active").size() > 0)) {
options.area = [top.$(".tab-pane.active").width() + "px", top.$(".tab-pane.active").height() + "px"];
options.offset = [ top.$(".tab-pane.active").scrollTop() + "px", "0px"];
options.offset = [top.$(".tab-pane.active").scrollTop() + "px", "0px"];
}
Layer.open(options);
return false;
... ... @@ -2130,7 +2129,7 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
var titHeight = layero.find('.layui-layer-title').outerHeight() || 0;
var btnHeight = layero.find('.layui-layer-btn').outerHeight() || 0;
$("iframe", layero).parent().addClass("ios-iframe-fix").css("height", layero.height() - titHeight - btnHeight);
$("iframe", layero).parent().css("height", layero.height() - titHeight - btnHeight);
$("iframe", layero).css("height", "100%");
}
},
... ... @@ -2207,6 +2206,9 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
setting.url = Fast.api.fixurl(setting.url);
}
});
Layer.config({
skin: 'layui-layer-fast'
});
// 绑定ESC关闭窗口事件
$(window).keyup(function (e) {
if (e.keyCode == 27) {
... ... @@ -6775,6 +6777,10 @@ define('backend',['fast', 'moment'], function (Fast, Moment) {
},
init: function () {
//公共代码
//添加ios-fix兼容iOS下的iframe
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
$("html").addClass("ios-fix");
}
//配置Toastr的参数
Toastr.options.positionClass = Config.controllername === 'index' ? "toast-top-right-index" : "toast-top-right";
//点击包含.btn-dialog的元素时弹出dialog
... ...
... ... @@ -2063,7 +2063,6 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
area: area,
content: url,
zIndex: Layer.zIndex,
skin: 'layui-layer-noborder',
success: function (layero, index) {
var that = this;
//存储callback事件
... ... @@ -2096,9 +2095,9 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
}
}
}, options ? options : {});
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && top.$(".tab-pane.active").size() > 0) {
if ($(window).width() < 480 || (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && top.$(".tab-pane.active").size() > 0)) {
options.area = [top.$(".tab-pane.active").width() + "px", top.$(".tab-pane.active").height() + "px"];
options.offset = [ top.$(".tab-pane.active").scrollTop() + "px", "0px"];
options.offset = [top.$(".tab-pane.active").scrollTop() + "px", "0px"];
}
Layer.open(options);
return false;
... ... @@ -2142,7 +2141,7 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
var titHeight = layero.find('.layui-layer-title').outerHeight() || 0;
var btnHeight = layero.find('.layui-layer-btn').outerHeight() || 0;
$("iframe", layero).parent().addClass("ios-iframe-fix").css("height", layero.height() - titHeight - btnHeight);
$("iframe", layero).parent().css("height", layero.height() - titHeight - btnHeight);
$("iframe", layero).css("height", "100%");
}
},
... ... @@ -2219,6 +2218,9 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
setting.url = Fast.api.fixurl(setting.url);
}
});
Layer.config({
skin: 'layui-layer-fast'
});
// 绑定ESC关闭窗口事件
$(window).keyup(function (e) {
if (e.keyCode == 27) {
... ...
... ... @@ -70,7 +70,12 @@ body.is-dialog {
/*width: 70%;*/
max-width:885px;
}
/*iOS兼容*/
html.ios-fix,html.ios-fix body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.content {
min-height:500px;
}
... ... @@ -90,18 +95,8 @@ body.is-dialog {
height: 100%;
width: 100%;
}
&.ios-iframe-fix{
.tab-pane {
-webkit-overflow-scrolling:touch;
overflow: auto;
}
}
}
.layui-layer-iframe .layui-layer-content.ios-iframe-fix {
-webkit-overflow-scrolling: touch;
overflow: auto;
overflow-y: auto!important;
}
@media only screen and (min-width : 481px) {
.row-flex {
display: flex;
... ... @@ -603,104 +598,110 @@ table.table-template{
.box-shadow(0 0 3px #eee);
}
}
.layui-layer-title {
background:#2c3e50!important;
color:#fff!important;
}
/*避免出现多滚动条*/
.layui-layer-noborder {
border:none!important;
box-shadow: 1px 1px 50px rgba(0,0,0,.3)!important;
}
.layui-layer-moves{
.box-sizing(content-box);
}
.layui-layer-iframe {
overflow:hidden!important;
}
.layui-layer-iframe .layui-layer-content {
-webkit-overflow-scrolling: touch;
overflow-y: hidden!important;
overflow:hidden;
}
/*自定义底部灰色操作区*/
.layui-layer-btn {
text-align: center!important;
padding: 10px!important;
background: #ecf0f1;
}
.layui-layer-footer {
padding:8px 20px;
background-color:#ecf0f1;
height:auto;
text-align:inherit!important;
}
.layui-layer-btn a {
background-color: #95a5a6!important;
border-color: #95a5a6!important;
color:#fff!important;
}
.layui-layer-btn .layui-layer-btn0{
background-color: #18bc9c!important;
border-color: #18bc9c!important;
}
.layui-layer-setwin {
top:10px!important;
> a {
background:none!important;
cite {
display:none;
}
&:after {
content: "\e625";
font-family: iconfont;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
font-size: 18px;
color: #fff;
margin: 0;
z-index: 1;
.layui-layer-fast {
.layui-layer-title {
background:#2c3e50!important;
color:#fff!important;
border-bottom:none;
//只有当包含layui-layer-title标题时才显示按钮
~.layui-layer-setwin{
top: 0px;
height:42px;
> a{
height:42px;
line-height:42px;
display:inline-block;
}
}
&:hover {
text-decoration: none!important;
background:none!important;
}
&.layui-layer-border {
border:none!important;
box-shadow: 1px 1px 50px rgba(0,0,0,.3)!important;
}
.layui-layer-moves{
.box-sizing(content-box);
}
/*自定义底部灰色操作区*/
.layui-layer-btn {
text-align: center!important;
padding: 10px!important;
background: #ecf0f1;
a {
background-color: #95a5a6!important;
border-color: #95a5a6!important;
color:#fff!important;
}
&:focus {
text-decoration: none!important;
.layui-layer-btn0{
background-color: #18bc9c!important;
border-color: #18bc9c!important;
}
}
.layui-layer-min{
&:after {
content: "\e625";
}
.layui-layer-footer {
padding:8px 20px;
background-color:#ecf0f1;
height:auto;
text-align:inherit!important;
}
.layui-layer-max{
&:after {
content: "\e623";
}
}
.layui-layer-maxmin{
&:after {
content: "\e624";
.layui-layer-setwin {
> a {
background:none!important;
cite {
display:none;
}
&:after {
content: "\e625";
font-family: iconfont;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
font-size: 18px;
color: #fff;
margin: 0;
z-index: 1;
}
&:hover {
text-decoration: none!important;
background:none!important;
}
&:focus {
text-decoration: none!important;
}
}
}
.layui-layer-close1{
&:after {
content: "\e626";
.layui-layer-min{
display:none;
&:after {
content: "\e625";
}
}
}
.layui-layer-close2,.layui-layer-close2:hover{
background:url('../libs/layer/build/skin/default/icon.png') no-repeat -149px -31px !important;
&:after {
.layui-layer-max{
display:none;
&:after {
content: "\e623";
}
}
.layui-layer-maxmin{
display:none;
&:after {
content: "\e624";
}
}
.layui-layer-close1{
&:after {
content: "\e626";
}
}
//样式二关闭按钮
.layui-layer-close2,.layui-layer-close2:hover{
background:url('../libs/layer/build/skin/default/icon.png') no-repeat -149px -31px !important;
top:-30px;
right:-30px;
&:after {
display:none;
}
}
}
}
... ...