Bootstrap alert组件使用

悠悠 2022-03-02 15:16 283阅读 0赞

## 1. 遇到的主要问题就是无法关闭弹出来的Alert提示： ##

<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>
    	
    	
        <script src="js/jquery-1.9.1.min.js" > </script>

<script src="js/bootstrap.min.js" type="text/javascript"></script> 
    
     
     2.测试自动关闭的功能（设置2 S后自动关闭Alert提示Div）
     
      
     
      
      
       <script>
    		$(".alert-success").alert();
    		window.setTimeout(function() { $(".alert-success").alert('close'); }, 2000);
    		</script>
    
     <div class="alert alert-success fade in">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
            </div>
    
       
        
        
         
    
    
       
        
     
     
    
       
        
    
       
        
    
       
        
    
       
        
    
       
        
    
       
        
    
       
        
     3. 事件的调用（可以在关闭和关闭后进行事件的调用）
    
       
        
         
        样式：
       
        
    
       
        
    
       
        
        
                 <div class="alert alert-block alert-error fade in">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <h4 class="alert-heading">Oh snap! You got an error!</h4>
                <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                <p>
                    <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" id="close" data-dismiss="alert" href=".alert-block">Or do this</a>
                </p>
            </div>
    
        
         
    
        
         
    
    
       
        
    
       
        
        
         
    
    
       
        
    
       
        
        
         
    
    
       
        
    
       
        
         
        Script： 
       
        
     
    
    
     
      <script>
                $(function(){
                    //注意：事件要绑定在UI容器上，而不是关闭按钮中
                    $(".alert-block").on("close",function(){
                        alert("这是关闭前调用的")
                    })
                    $(".alert-block").on("closed",function(){
                        alert("这是关闭后调用的")
                    })
                })
                 
            </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

相关 Alert警告提示（antd-design组件库）简单使用

1.Alert警告提示警告提示，展现需要关注的信息。 2.何时使用当某个页面需要向用户显示警告的信息时。非浮层的静态展现形式，始终展现，不会自动消失，用户

快来打我*/ 2024年02月19日 09:43/ 0 赞/ 10 阅读

相关 JS组件Bootstrap Table使用方法详解

最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(

悠悠/ 2022年07月29日 10:51/ 0 赞/ 158 阅读

相关 bootstrap组件

组件----图标字样 Glyphicons是一套收费的图标字体，提供了web/移动开发中常用的小图标 bootstrap中可以免费使用这套字体中对的250+个。以服

痛定思痛。/ 2022年06月15日 11:14/ 0 赞/ 163 阅读

相关 bootstrap select组件

一、组件开源地址以及API说明 bootstrap-select开源地址：[https://github.com/silviomoreto/bootstrap-select

快来打我*/ 2022年06月01日 13:08/ 0 赞/ 221 阅读

相关 BootStrap复习之BootStrap组件

今日目录： 1、Glyphicons字体图标 2、下拉菜单组件 3、按钮组组件 4

我不是女神ヾ/ 2022年05月24日 07:52/ 0 赞/ 235 阅读

相关 bootstrap组件使用

一、字体图标的使用访问组件库[https://v3.bootcss.com/components/][https_v3.bootcss.com_components]，

不念不忘少年蓝@/ 2022年05月19日 06:18/ 0 赞/ 298 阅读

相关 bootstrap中daterangepicker组件的使用(三)

bootstrap中daterangepicker组件的使用(二)我们说的是在demo中如何使用daterangepicker,接下来我将demo迁到我的项目中

亦凉/ 2022年04月22日 14:42/ 0 赞/ 223 阅读

相关 bootstrap中daterangepicker组件的使用(二)

为了实现 bootstrap中daterangepicker组件的使用(一) 中的需求,我对demo进行了定制,具体需求可以参见:bootstrap中daterangepick

你的名字/ 2022年04月14日 03:30/ 0 赞/ 227 阅读

相关 bootstrap中daterangepicker组件的使用(一)

这段时间接了一个需求,需要实现打开一个日期控件,需要选择一个日期范围: 需求是这样: ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

电玩女神/ 2022年04月14日 03:30/ 0 赞/ 223 阅读

相关 Bootstrap alert组件使用

1. 遇到的主要问题就是无法关闭弹出来的Alert提示： <link rel="stylesheet" href="css/bootstrap.css" type

悠悠/ 2022年03月02日 15:16/ 0 赞/ 284 阅读