在MVC 4中查找警报或通知

Question

Watch the next image.

It's something like an alert or notification and some of them have a close button to the right of the border.

I would like to implement that in my MVC 4 project where the alert can closed (I guess this is done using COOKIES)

I don't know if this can be done using JQUERY o some HtmlHelper extension. Can you mention me name components which I can use? I really don't know any one of them.

Answer 1

approach 1: you can make a partial view, and hide it when they click on the x in a corner

you would show the partial view selectively based on a value int he viewmodel

in the container viewmodel you could have...
@{if (Model.IsVisitor)
       @Html.Partial("CustomAlert",Model.Message);
 }};

and then you could have a parital view CustomAlert.cshtml

<div id="custom-alert" class="custom-alert">
   <div id="close-custom-alert" class="custom-alert-top-right">&#x2716;</div>
   <p style="width:95%"> @Model </p>
</div>

<script>
       $('#close-custom-alert').click(function(){$('#custom-alert').hide()});
</script>

<style>
   .custom-alert { position: relative; background-color:cornsilk; }
   .custom-alert-top-right   { position : absolute; top:5px; right:5px; padding-5px; }
</style>

---

approach 2 see jquery ui modal dialog http://jqueryui.com/dialog/#default and http://jqueryui.com/dialog/#modal . You can pop the dialog based on a value in the view like

$(function(){
 if ('@Model.IsVisitor'){
  $( "#dialog-modal" ).dialog({
   height: 140,
   modal: true
  });
 }
});