显示bootstrap dismissible alert on按钮,每次单击Jquery

btqmn9zl  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(109)

我正在使用C#创建一个Web应用程序Asp.net。我想在用户每次单击时显示警报。警报从页面顶部显示,第二个警报下推第一个警报,它将在5秒内自动关闭。如enter image description here
如果用户不断点击按钮,则警报将继续,并将在5秒内自动关闭
我已经尝试了以下链接Bootstrap Alert Auto Close,但它只显示一个警报。如果用户不断点击按钮,则警报将继续

mwkjh3gx

mwkjh3gx1#

您所指的消息类型通常称为吐司消息。
我不确定bootstrap现在是否内置了“吐司”消息,但是有大量的示例例程可以用于此目的。
所以,假设你有jQuery,然后从这里获取toastr示例:
https://github.com/CodeSeven/toastr
所以,一些示例标记:

<asp:Button ID="Button3" runat="server" 
            Text="toast test"
            CssClass="btn"
            OnClientClick="mytoast('ToastHeading','Test toast message');return false;" />

        <script>

            function mytoast(head, mytext) {

                // head = heading part 
                // mytext = text in toast message to display

                $.toast({
                    heading: head,
                    text: mytext,
                    position: 'top-right',
                    icon: 'info',
                    hideAfter: 5000,
                    allowToastClose: false,
                    loader: false,
                    stack: 10,
                    showHideTransition: 'slide'
                });
            }

        </script>

结果是这样的:

相关问题