Bootstrap4组件:弹出提示框(Toast)


发布时间:2020-03-20 16:07    作者: Uncle Hui   已过去:3 周   阅读总量:54 已被赞:0


弹出提示框(Toast)

Toasts出于性能原因选择加入,因此 你必须自己初始化它们

<div class="toast hide" id="myToast" data-delay="500" data-animation="true/false" data-autohide="true/false" style="position:fixed;top:0;right:0;">

<div class="toast-header">

<img src="images/logo_sm.png" alt="" width="20" class="rounded mr-2">

<strong class="mr-auto">标题</strong>

<small>1分钟前</small>

<button class="close ml-2 mb-1" data-dismiss="toast">×</button>

</div>

<div class="toast-body">

您好! 这是一个Toasts弹出提示框.

</div>

</div>

 

<script>

$('#btn1').click(function(){

$('#myToast').toast('show');

});

</script>

自浮动:水平:.mr-auto(水平浮动到右边)data-autohide="true/false" 是否自动隐藏提示框data-delay="500"自动隐藏的时间设置 data-animation="true/false" 是否开启淡入淡出效果

JavaScript 行为

选项

选项可以通过数据属性或JavaScript传递。对于数据属性,请将选项名称附加到 data-, 如在 data-animation="".

data-autohide="true/false" 是否自动隐藏提示框data-delay="500"自动隐藏的时间设置 data-animation="true/false" 是否开启淡入淡出效果

方法

(1) .toast(options):将toast处理附加到元素集合。

(2) .toast('show'):揭示元素的提示框。在实际显示提示框之前返回调用者(i.e. 之前 shown.bs.toast事件发生). 你必须手动调用此方法,代替你的提示框不会显示。

(3) .toast('hide'):隐藏元素的提示框。在实际隐藏toast之前返回调用者(i.e. 之前 hidden.bs.toast 事件发生). 如果你做了,你必须手动调用此方法 autohide为false.

事件

(1) show.bs.toast

(2) shown.bs.toast

(3) hide.bs.toast

(4) hidden.bs.toast

点赞

0




登陆后方可评论