Semantic UI Message消息窗口关闭

引入Semantic UI框架:

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

HTML:

<div class="ui message">
  <i class="close icon"></i>
  <div class="header">
    Welcome back!
  </div>
  <p>This is a special notification which you can dismiss if you're bored with it.</p>
</div>

js有两种写法:
方法1:

$('.message .close')
  .on('click', function() {
    $(this)
      .closest('.message')
      .transition('fade')  //fade消失动画
    ;
  })
;

方法2:

          $('.message .close').
          click(function () {
              $(this).
              closest('.message').
              transition('fly');
          });

注意:
$(’.message .close’) 其中message后面有一个空格,然后.close
参考Semantic ui官网:https://semantic-ui.com/collections/message.html

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值