search

Bootstrap3 alert with overlay in MVC 5

Bootstrap3, alert, overlay.

hashtag
應用情境

當 MVC 5 後端完成運算後，Response Page 載入的頁面就已是 Alert 開啟的狀態。

hashtag
參考

hashtag
程式碼紀錄

Alert-Overlay-Lab.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<style>
.alert-overlay {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.3);
  z-index: 1050;
  cursor: pointer;
}
.alert-overlay > .alert {
  position: relative;
  width: 60%;
  left: 20%;
  top:10%;
  min-height: 16%;
  max-height: 80%;
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
  -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
</style>
</head>
<body>

  <div class="alert-overlay">
    <div class="alert alert-danger">
      <a href="#" class="close">&times;</a>
      <h5>Hey you!</h5>
      <ul>
       <li>Your Princess is in Another Castle!</li>
       <li>Your Princess is in Another Castle!</li>
       <li>Your Princess is in Another Castle!</li>
       <li>Your Princess is in Another Castle!</li>
       <li>Your Princess is in Another Castle!</li>
      </ul>
    </div>
  </div>

<div class="container">
  <h1>Content Content 1</h1>
  <h1>Content Content 2</h1>
  <h1>Content Content 3</h1>
  <h1>Content Content 4</h1>
  <h1>Content Content 5</h1>
</div>

<script>

$('.alert-overlay').on('click', function() {
  $('.alert-overlay').css('display','none');
});

//function turnOnOverlay() {
//  $('.overlay').css('display','block');
//}
//
//function turnOffOverlay() {
//  $('.overlay').css('display','none');
//}

</script>

</body>
</html>

hashtag
沒圖沒真象

EOF

PreviousMVC5 JavaScriptResult 使用紀錄NextAutofac 觀念、實務與紀錄

Last updated