добавление границы-радиуса без заполнения в fancybox2 - PullRequest
Новая
       13

добавление границы-радиуса без заполнения в fancybox2

1 голос
/ 30 января 2012

Я использую fancybox 2, и я могу избавиться от отступов вокруг внешней стороны рамки, но затем я теряю радиус границы, с которым она идет. То, что я хочу, это радиус границы вокруг основного содержимого внутри фрейма. Поэтому я попытался зайти в css и добавить border-radius к внутреннему селектору причудливой рамки, и он не будет работать. Как я могу дать рамке закругленный угол без рамки? Если кто-то может помочь мне с этим, это было бы здорово!

Ответы [ 3 ]

1 голос
/ 11 марта 2013

Попробуйте этот код, он работал для меня

Добавьте пользовательские классы после причудливого блока для завершенного метода.

Пример.

HTML 

<a href="#signin-container" class="signin-ovr"> Login </a>

JS 

$(document).ready(function(e) {
    $(".signin-ovr").fancybox({
        afterLoad   :   function(){
                            $("#fancybox-content").addClass('fancybox-content-cust');
                            $(".fancybox-bg").addClass('fancybox-bg-cust');
                            $("#fancybox-outer").addClass('fancybox-outer-cust');
                        }

    });     
});

CSS 

.fancybox-content-cust {
    overflow: visible !important;
    border: 10px solid #FFFFFF;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.fancybox-bg-cust{
    display: none;  
}

.fancybox-outer-cust {
    background: transparent !important;
}

Тогда вы получите радиус границы для поля наложения.

1 голос
/ 31 мая 2014

для fancybox v2 с круглыми бордюрами 

.fancybox-outer, .fancybox-inner, .fancybox-skin {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 10px!important;
}
0 голосов
/ 30 января 2012

У CSS3 достаточно иронично свойство радиуса границы, озаглавленное border-radius, есть несколько конкретных вариантов, т. Е. Firefoxes moz-border-radius.

. Используется так: 

#div-id .specific-class {
    border-radius: 10px;
}

Есливы хотите только один округленный, он может быть изменен следующим образом: 

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Я надеюсь, что это отвечает на ваш вопрос.

...