搗亂引導警報覆蓋與行的超大屏幕

Question

嘿，我仍然得到用於創建網站，我試圖找出如何創建這樣的事情：

<div class="alert alert-danger alert-dismissible fade in" role="alert"> 
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
       <span aria-hidden="true">&times;</span></button> 
      <h4>This is an alert!</h4> 
      <p> 
       <button class="btn btn-danger" type"button">Danger Action</button> 
       <button class="btn btn-default" type="button">Cancel</button> 
      </p> 
</div> 

，以在整個顯示已被分成若干行的jumbotron。我沒有設置警報來執行此操作並接受建議。我需要能夠將其他元素置於警戒狀態，如果不透明，我希望能夠看到背後的jumbotron。

這裏的超大屏幕，我試圖掩蓋的例子：

<div class="jumbotron"> 

       <div class="container"> 
       <!--Row with two equal columns--> 
        <div class="row"> 
         <div class="col-md-6"> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p> 
         </div> 
         <div class="col-md-6"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-6"> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p> 
         </div> 
         <div class="col-md-6"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p> 
         </div> 
        </div> 
       </div> 
      </div> 

Answer 1

如果高度可以是動態的，那麼你可以打開警報類。爲了更容易添加/刪除類，我改變了一下html標記。

這裏是一個full screen example

這裏是JS-FIDDLE

function myAlert() { 
    $(".jumbotron").addClass("alert alert-danger alert-dismissible fade in"); 
    $(".main").addClass("hidden"); 
    $(".myAlert").removeClass("hidden"); 
} 

function danger() { 
    alert("you just alerted some danger"); 
} 

function cancel() { 
    $(".jumbotron").removeClass("alert alert-danger alert-dismissible fade in"); 
    $(".main").removeClass("hidden"); 
    $(".myAlert").addClass("hidden"); 
}