نمایش و بسته شدن خودکار پیام هشدار Bootstrap بعد از چند ثانیه

در این مقاله قصد داریم با استفاده از Bootstarp چند کلید ایجاد کرده و برای آنها پیام هشدار که هنگام کلیک روی آنها باز و به صورت خودکار بعد از چند ثانیه بسته می شوند را پیاده سازی کنیم.

در این مقاله قصد داریم با استفاده از Bootstarp چند کلید ایجاد کرده و برای آنها پیام هشدار که هنگام کلیک روی آنها باز و به صورت خودکار بعد از چند ثانیه بسته می شوند را پیاده سازی کنیم. و در کادر هشدار یک کلید برای بستن پیام به صورت دستی هم قرار خواهیم داد.

برای شکل دادن به حرکت کادر پیام از jQuery استفاده می شود.

به سراغ ایجاد یک پروژه در ASP.net با استفاده از C# می رویم.

یک Web form به پروژه اضافه کرده و کدهای زیر را در آن قرار دهید.

 <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <style type="text/css">
        .messagealert {
            width: 100%;
            position: fixed;
             top:0px;
            z-index: 100000;
            padding: 0;
            font-size: 15px;
        }
    </style>
    <script type="text/javascript">
        function ShowMessage(message, messagetype) {
            var cssclass;
            switch (messagetype) {
                case 'Success':
                    cssclass = 'alert-success'
                    break;
                case 'Error':
                    cssclass = 'alert-danger'
                    break;
                case 'Warning':
                    cssclass = 'alert-warning'
                    break;
                default:
                    cssclass = 'alert-info'
            }
            $('#alert_container').append('<div id="alert_div" style="margin: 0 0.5%; -webkit-box-shadow: 3px 4px 6px #999;" class="alert fade in ' + cssclass + '"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>' + messagetype + '!</strong> <span>' + message + '</span></div>');

            setTimeout(function () {
                $("#alert_div").fadeTo(2000, 500).slideUp(500, function () {
                    $("#alert_div").remove();
                });
              }, 5000);//5000=5 seconds
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="messagealert" id="alert_container">
            </div>

             <div style="margin-top: 100px; text-align:center;">
            <asp:Button ID="btnSuccess" runat="server" Text="Submit" CssClass="btn btn-success"
                OnClick="btnSuccess_Click" />
            <asp:Button ID="btnDanger" runat="server" Text="Danger" CssClass="btn btn-danger"
                OnClick="btnDanger_Click" />
            <asp:Button ID="btnWarning" runat="server" Text="Warning" CssClass="btn btn-warning"
                OnClick="btnWarning_Click" />
            <asp:Button ID="btnInfo" runat="server" Text="Info" CssClass="btn btn-info"
                OnClick="btnInfo_Click" />
            </div>
        </div>
    </form>
</body>
</html>

برای استفاده از فایل های JS و CSS در Bootstrap ، لازم است منبع آنها را در تگ Head اضافه کنید .

یک تایمر با استفاده از jQuery و تابع setTimeout برای بسته شدن خودکار کادر پیام بعد از 5 ثانیه قرار می دهیم. می توانید این تایم را افزایش یا کاهش دهید.

در قسمت کد ، کدهای زیر را قرار دهید.

 public enum MessageType { Success, Error, Info, Warning };
    protected void Page_Load(object sender, EventArgs e)
    {
    } 
    protected void ShowMessage(string Message, MessageType type)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + Message + "','" + type + "');", true);
    }
    protected void btnSuccess_Click(object sender, EventArgs e)
    {
        ShowMessage("Record submitted successfully", MessageType.Success);
    }
    protected void btnDanger_Click(object sender, EventArgs e)
    {
        ShowMessage("A problem has occurred while submitting data", MessageType.Error);
    }
    protected void btnWarning_Click(object sender, EventArgs e)
    {
        ShowMessage("There was a problem with your internet connection", MessageType.Warning);
    }
    protected void btnInfo_Click(object sender, EventArgs e)
    {
        ShowMessage("Please verify your data before submitting", MessageType.Info);
    }

در کد بالا یک Enum ایجاد کرده ایم. Enum ها از نوع strongly type هستند که باعث می شوند کد خواناتر و کمتر در معرض خطاهای تایپ باشند. زمانی که یک مجموعه از مقادیر داریم که عملکرد قابل توجه و بدون تغییر دارند می توانیم از Enum ها استفاده کنیم.

یک تابع showMessage ایجاد کردیم که پیام و نوع پیام را به عنوان پارامتر میگیرد و تابع جاوا را صدا زده و به آن انتقال می دهد. بر اساس این پارامتر ارسالی پیام هشدار نمایش داده خواهد شد.

فقط نیاز داریم که یک پیام دلخواه که میخواهیم نشان داده شود و نوع آن را به تابع showMwssage بفرستیم .

آموزش بوت استرپ

فایل های ضمیمه

3879_WebApplication1.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

نمایش و بسته شدن خودکار پیام هشدار Bootstrap بعد از چند ثانیه

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید