Белые углы в Fancybox на границе радиуса

Question

Я применяю радиус границы на Fancybox http://jsfiddle.net/LF27m/2/, и когда я устанавливаю радиус границы, он создает белые углы на Fancybox. и я не могу это удалить.

Мой CSS код:

#a1 div.popup-container{ 
height:350px; 
width:400px; 
background:#88B3D1; 
-moz-border-radius:30px 30px 30px 30px; 
border-radius:30px 30px 30px 30px; 
-webkit-border-radius: 30px 30px 30px 30px; 
overflow: hidden; 
} 

Мой HTML-код:

<div id="a1"> 
    <div class="popup-container"> 
     <div class="image-container"> 
      <img src="AllureFree Logo.gif" alt="Smiley face" width="130" height="130"/> 
     </div> 
     </br> 
     <div> 
      <h2 style="text-align:center; color:white;"> You must be 18 to shop on our Website.</h2> 
      <h2 style="text-align:center; color:white;"> Please verify your birthdate.</h2> 
     </div> 
</div 
</div> 

Answer 1

Они приходят из стилей, примененных к .fancybox-skin селектора (файл CSS FancyBox). Вы можете изменить значения по умолчанию в пользовательском файле CSS, как:

.fancybox-skin { 
    background-color: transparent; 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; 
} 

также добавить в свой padding: 0 FancyBox сценарий

$(document).ready(function() { 
    $('html').append('<a class="fancybox" style="display:none" href="#a1"></a>'); 
    $('.fancybox').fancybox({ 
     padding: 0, 
     afterClose: function() { 
      $('a[href="#a1"]').remove(); 
     } 
    }); 
    $('a[href="#a1"]').trigger('click'); 
}); 

См JSFIDDLE