新しい背景が適用されたときに、.modal-headerが左上と右の半径を失う

Question

私はbootbox.jsを使用して、ユーザに確認とエラーメッセージを表示します。これを行うには、className属性をbootboxに提供します。そして私はこれが最初の場所で起こっている理由を理解したいが、それはbackground.Hereは私が.errorAlert .modal-headerからborder-radius:5px 5px 0px 0pxを追加することによってそれを解決することができます知っているjsfiddle

で変更するクラスを適用.modal-header消えるの右半径。あなたはここにリンクに問題がある場合は

は、問題を再現する最小限のコードです：

HTML

<div class='btn btn-info' id = "simpleModal"> 
Show just a simple modal 
</div> 
<div class='btn btn-info' id="customClass"> 
Show a modal with a custom class 
</div> 

CSS：

.errorAlert .modal-header{ 
    background:red; 
} 

はJavaScript：

$(function(){ 
    $("#simpleModal").on("click",function(){ 

    bootbox.alert({title:"Just a modal",message:"With no custom class"}) 
    }) 
    $("#customClass").on("click",function(){ 
    bootbox.alert({title:"Just a modal",message:"With .errorAlert class applied",className:"errorAlert"}) 
    }) 
}) 

Answer 1

Bootstrapのボーダー半径は.modal-contentに適用され、デフォルトでは.modal-headerにはバックグラウンドがありません。モーダルヘッダにバックグラウンドを適用すると、ボーダ半径を持たないモーダルヘッダの赤い背景で覆い隠すため、ボーダ半径が消えます。