Bootstrap3 alert with overlay in MVC 5

Bootstrap3, alert, overlay.

應用情境

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

參考

程式碼紀錄

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>

MVC5.Sample.cshtml

@model SKLMVC5.Models.SomeThing

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
<div class="">
    <h4>SomeThing</h4>
    <hr />
    @* ## ------ ValidationSummary  ------ *@
    @* # 預設 ValidationSummary *@
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    @* # 改用 _OverlayValidationSummary *@
    @Html.Partial("_OverlayValidationSummary", true)

    @* ## ------ 表單欄位 ------ *@
    <div class="row">
        @Html.EditorFor(m => m.ID, "TextField")
        @Html.EditorFor(m => m.Name, "TextField")
        @Html.EditorFor(m => m.Category, "TextField")
    </div>
    <div class="form-group text-center">
        <input type="submit" value="Create" class="btn btn-default" />
    </div>
</div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

_OverlayValidationSummary.cshtml

@model Boolean
@{
    Boolean excludePropertyErrors = Model;
}

@* 取代
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
*@
@if (excludePropertyErrors)
{
    Boolean hasErros = (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count > 0);
    if (hasErros)
    {
        <div class="alert-overlay">
            <div class="alert alert-danger">
                <a href="#" class="close">&times;</a>
                <h5>錯誤訊息</h5>
                @Html.ValidationSummary(true)
            </div>
        </div>
    }
}
else
{
    Boolean hasErros = ViewData.ModelState.Values.Any(c => c.Errors.Count > 0);
    if (hasErros)
    {
        <div class="alert-overlay">
            <div class="alert alert-danger">
                <a href="#" class="close">&times;</a>
                <h5>錯誤訊息</h5>
                @Html.ValidationSummary(false)
            </div>
        </div>
    }
}

沒圖沒真象

EOF

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

Last updated 4 years ago