ブートストラップモーダルの上に水平に中央のdivを表示する

Question

ブートストラップモーダルの上に警告divを表示しようとしています。 divはモーダルに関連して水平にセンタリングする必要があります。

次のコード（またはfiddle）は私が行ったものです。私の問題は、shortMessageのテキストが必要ないためにラップされていることです。どうすれば修正できますか？ここで

$(document).ready(function() { 
 
    $("#myModal").modal("show"); 
 
    $("#myButton").click(function(){ 
 
    \t var shortMessage = "Lorem ipsum dolor sit amet"; 
 
     var LongMessage = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. \ 
 
          Nullam iaculis consequat risus sit amet feugiat. \ 
 
          Sed nec arcu quis tellus pretium malesuada id fringilla mi."; 
 
     DisplayFadingAlert(shortMessage); 
 
     setTimeout(function(){ 
 
     \t DisplayFadingAlert(LongMessage); 
 
     }, 2000); 
 
    }); 
 
}); 
 

 
function DisplayFadingAlert(message) 
 
{ 
 
    $fadingAlert = $("<div />", { 
 
     "class": "alert alert-success fading-message", 
 
     "text": message, 
 
    }); 
 
    $fadingAlert.appendTo($("body")); 
 

 
    var MARGIN = 5; 
 
    var modalWidth = $(".modal-content").width(); 
 
    var fadingAlertMaxWidth = parseInt(modalWidth - (MARGIN * 2)); 
 
    var fadingAlertWidth = $fadingAlert.width(); 
 
    
 
    if (fadingAlertWidth >= fadingAlertMaxWidth) 
 
     fadingAlertWidth = fadingAlertMaxWidth; 
 
    var modalLeft = $(".modal-content").offset().left; 
 
    var fadingAlertLeft = modalLeft + ((modalWidth - fadingAlertWidth)/2); 
 

 
    $fadingAlert.css({ 
 
     "left": fadingAlertLeft, 
 
     "width": fadingAlertWidth, 
 
     "max-width": fadingAlertMaxWidth 
 
    }); 
 

 
    $fadingAlert.fadeIn(300).delay(1500).fadeOut(600);; 
 
}

.fading-message { 
 
    position: fixed; 
 
    top: 0%; 
 
    z-index: 9999; 
 
    display: none; 
 
}

<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.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     I'm a modal body 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button id="myButton" type="button" class="btn btn-primary"> 
 
      Display Alert 
 
     </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

はデモです：JS Fiddle

修正：

fadingAlertWidthは、テキストの折り返しが生じ、外側のパディングとボーダーが含まれていませんでした。

関連するコードは：

var fadingAlertWidth = $fadingAlert.width()+32; // padding of 15px on the left and right and border of 1px each 

やコメントで述べたように、ちょうどmax-widthが設定され、さらにwidth:auto

、fadingAlertメッセージが身体に追加されたが、は削除されませんされません。このことができます

$('body div.alert.fading-message').remove(); 

希望：私は、この問題を修正するためにDisplayFadingAlert機能に以下の行を追加しました。 :)