溢出一个类fancybox-inner

时间:2016-12-27 09:57:37

标签: jquery fancybox

一个块 - 在图片中。如果是,则near字段弹出一个带有错误的块。

问题是默认情况下,类fancybox-inner overflow属性值是auto,因此当我得到错误时会出现错误块被删除。

我将值更改为继承了所有内容。但现在如果第一张照片显示一个小窗口。

告诉我你怎么修理?

现在:

enter image description here

需要:

enter image description here

enter image description here

enter image description here

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;
}

0 个答案:

没有答案