一个块 - 在图片中。如果是,则near字段弹出一个带有错误的块。
问题是默认情况下,类fancybox-inner overflow属性值是auto,因此当我得到错误时会出现错误块被删除。
我将值更改为继承了所有内容。但现在如果第一张照片显示一个小窗口。
告诉我你怎么修理?
现在:
需要:
HTML表单:
<div id="edit-category-form" class="form no-trans">
<h1>Edit/Remove</h1>
<div class="form-block category-status clearfix">
<input type="text" id="new" placeholder="Category" class="form-control"/>
<input type="hidden" id="old" />
<i class="fa fa-tag no-trans" aria-hidden="true"></i>
<div class="error-tooltip clearfix">
<ul class="error-main"></ul>
</div>
</div>
<div class="form-block clearfix">
<button id="remove-category-btn"><i class="fa fa-trash-o" aria-hidden="true"></i>Remove</button>
<button id="edit-category-btn"><i class="fa fa-floppy-o" aria-hidden="true"></i>Save</button>
</div>
</div>
CSS表单:
div.form {
width: 350px;
padding: 40px 24px;
background: #eee;
display: none;
z-index: 60;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
div.form h1 {
color: #ccc;
font-size: 50px;
font-weight: 400;
text-align: center;
margin: 0 0 10px 0;
}
input.form-control{
width: 100%;
height: 46px;
padding: 5px 7px 5px 25px;
background: #fff;
color: #666;
line-height: 28px;
font-size: 18px;
border: 2px solid #ddd;
}
div.form-block {
width: 100%;
position: relative;
margin-bottom: 8px;
}
div.form-block i.fa {
top: 15px;
left: 9px;
position: absolute;
}
div.form-block.confirm {
margin: 20px 0 0 0;
}
div.form-block ul.error-main {
line-height: 32px;
}
div.form-block input.form-control:focus,
div.form-block input.form-control:focus + i.fa,
div.form-block textarea.form-control:focus {
border-color: #10CE88;
color: #10CE88;
}
div.form-block.wrong-entry {
-moz-animation: wrong-log 0.3s;
-webkit-animation: wrong-log 0.3s;
animation: wrong-log 0.3s;
}
.wrong-entry .form-control + .fa,
div.form-block.wrong-entry .form-control{
border-color: #ed1c24;
color: #ed1c24;
}
div.form-block.req p {
width: 100%;
text-align: left;
font-size: 12px;
color: #989898;
}
textarea.form-control {
width: 95%;
height: 50px;
padding: 5px 7px 5px 30px;
background: #fff;
color: #666;
font-size: 18px;
border: 2px solid #ddd;
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
input.form-control:focus, input.form-control:focus + .fa,
input.form-control:focus + .fa-envelope-o {
border-color: #10CE88;
color: #10CE88;
}
div[class$="status"] .fa {
position: absolute;
left: 11px;
top: 14px;
color: #999;
}
.form-block span.req {
height: 46px;
float: right;
margin: 0 0 0 5px;
}
div.form-block.wrong-entry,
div.user-policy.wrong-entry label {
-moz-animation: wrong-log 0.3s;
-webkit-animation: wrong-log 0.3s;
animation: wrong-log 0.3s;
}
.wrong-entry .form-control + .fa,
div.form-block.wrong-entry .form-control {
border-color: #ed1c24;
color: #ed1c24;
}
div.error-tooltip {
width: 100%;
top: 0;
right: 101%;
display: block;
z-index: 1000;
opacity: 0;
padding: 7px 0 7px 5px;
line-height: 46px;
font-size: 12px;
position: absolute;
}
div.error-tooltip:after {
left: 100%;
top: 50%;
/*border: solid transparent;*/
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #ed1c24;
border-width: 5px;
margin-top: -5px;
}
div.error-top:after {
top: 18%;
}
ul.error-main {
color: #FFF;
text-align: center;
background: #EC3940;
line-height: 40px;
}
ul.error-main li.error-li{
line-height: 24px;
}