самозагрузки 3 модальный фон заголовка цвета

Question

Привет У меня есть bootstrap модальность, что я хочу, чтобы установить его background-color:

Но я получаю белое пространство на верхних углах:

Это мой стиль:

.modal.modal-alert .modal-dialog .modal-content { 
    border-radius: 6px; 
    padding: 0; 
} 
.modal.modal-alert .modal-dialog .modal-content .modal-header { 
    padding:9px 15px; 
    border-bottom:1px solid #eee; 
    background-color: #0480be; 
    -webkit-border-top-left-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    -moz-border-radius-topleft: 6px; 
    -moz-border-radius-topright: 6px; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
} 
.modal.modal-alert .modal-dialog .modal-content .modal-body { 
    padding: 10px 0; 
} 
.modal.modal-alert .modal-dialog .modal-content .modal-footer { 
    padding-top: 15px; 
} 

Радиус границы должен быть 6 пикселей и его то, что у меня есть.

Вот код: https://codepen.io/anon/pen/xgGvoP

Любой ключ?

Answer 1

Набор border-radius на .modal-header к 3px. Учитывая, что он находится внутри .modal-content, тот же радиус не будет соответствовать.

.modal.modal-alert .modal-dialog .modal-content { 
 
    border-radius: 6px; 
 
    padding: 0; 
 
} 
 
.modal.modal-alert .modal-dialog .modal-content .modal-header { 
 
    padding: 9px 15px; 
 
    border-bottom: 1px solid #eee; 
 
    background-color: #0480be; 
 
    -webkit-border-top-left-radius: 3px; 
 
    -webkit-border-top-right-radius: 3px; 
 
    -moz-border-radius-topleft: 3px; 
 
    -moz-border-radius-topright: 3px; 
 
    border-top-left-radius: 3px; 
 
    border-top-right-radius: 3px; 
 
} 
 
.modal.modal-alert .modal-dialog .modal-content .modal-body { 
 
    padding: 10px 0; 
 
} 
 
.modal.modal-alert .modal-dialog .modal-content .modal-footer { 
 
    padding-top: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row text-center"> 
 
    <h3></h3> 
 
    <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a> 
 
    </div> 
 
    <hr> 
 
</div> 
 
<div class="modal modal-alert fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
     <h4 class="modal-title" id="myModalLabel">Basic Modal</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <h3>Modal Body</h3> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

border-radius для родительского элемента и заголовка модальной коробки был равным.

Если вы увеличиваете border-radius означает, что он отобразит цвет фона .modal-content класс модальной коробки.

Таким образом, вы должны увеличить border-radius из .modal-content 3px больше modal-header

Ex:

.modal.modal-alert .modal-dialog .modal-content .modal-header { 
padding: 9px 15px; 
border-bottom: 1px solid #eee; 
background-color: #0480be; 
-webkit-border-top-left-radius: 6px; 
-webkit-border-top-right-radius: 6px; 
-moz-border-radius-topleft: 6px; 
-moz-border-radius-topright: 6px; 
border-top-left-radius: 6px; 
border-top-right-radius: 6px; 
} 

.modal.modal-alert .modal-dialog .modal-content { 
border-radius: 9px; 
padding: 0; 
} 

Answer 3

Найдено большая работа, выполняемая человеком Его именем является Oskar

Сохраненный много моего времени. Пожалуйста, проверьте эту ссылку, это не может быть лучше.

Все, что нам нужно сделать, это добавить следующие классы:

modal-header modal-header-primary 
modal-header modal-header-default 
modal-header modal-header-success 
modal-header modal-header-warning 
modal-header modal-header-danger 

Вот ссылка - Change background color of Modal-Header