整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效

番茄西红柿发布于2019-04-23 13:17 / 2745人阅读

摘要：通过按钮属性显示不同内容当有一堆按钮，都要触发相同的模态框如向好友列表中某个人发消息，只是有用户不同，那么可以使用配合来实现好友列表好友列表张三张三李四李四王二王二触发事件的按钮解析出内容

效果图：

我的代码示例：

　整段代码：





{{$title}}




















  
    
      由上海交通大学教育集团整合海内外顶尖的证券投资领域专家资源，推出权威、特色、实用的《私募基金经理高级研修班
      
        
          
            
            
            
            
            
             
          
        
      
    
  
   


  
    您现在的位置是：网站首页> {{$data.a_Title}}
    
      
        报名信息填写
        
			
				姓名*
				
				
				
			
			(审核通过)
			


			
				手机号*
				
				
				
			
			(审核通过)
			


			
				公司/单位*
				
				
				
			
			(审核通过)
			


			
				职位*
				
				
				
			
			(审核通过)
			


			
				邮箱*
				
				
				
			
			(审核通过)
			
				
				
				
						
		
      
    
  
  
    
	
    
    
    
    
    
    
  
   


 
Top


	
        
            
                
                    
                    温馨提示
                
                
                    您的操作不可逆

其他示例：




    
    
    
    Bootstrap Modal
    
    >

    
 
    
        
            
                
                    
                    温馨提示
                
                
                    您的操作不可逆
                
                
                    
                    
                
            
        
    
 
    
    


@*为 .modal 添加 role="dialog"，用于指定模态框为对话框。
为 .modal-dialog 添加 aria-hidden="true" 属性。
通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
关闭动画
如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。
 
通过按钮属性显示不同内容
当有一堆按钮，都要触发相同的模态框(如：向好友列表中某个人发消息)，只是有用户ID不同，那么可以使用data-whatever配合event.relatedtarget来实现：
[html] view plain copy



    
    
    
    Bootstrap Modal
    


 
 
    
        好友列表
        
            
                
                
                
            
        
    
 
    
        
            
                
                    
                    New message
                
                
                    
                        
                            Recipient:
                            
                        
                        
                            Message:
                            
                        
                    
                
                
                    
                    
                
            
        
    
    
    
    

*@

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1669.html

Bootstrap Modal多个弹出层顺序

摘要：多个弹出层顺序与的顺序关联。后来者居上即靠后的层弹出的时候会在上层。比如上图所示，模态框弹出的时候会在模态框上面。Bootstrap Modal多个弹出层顺序与div的顺序关联。后来者居上：即div靠后的modal层弹出的时候会在上层。比如上图所示，模态框2弹出的时候会在模态框1上面。

BWrong 2019-04-23 13:18 评论0 收藏0
Bootstrap使用模态框modal实现表单提交弹出框

摘要：模态框插件模态框是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能，那么您需要引用...

wind3110991 2019-08-02 15:56 评论0 收藏0
bootstrap modal上弹出dialog 报错Maximum call stack size

摘要：昨天修改弹出的警告太难看了，改用对话框，然后就报了一个错反复测试，在的模态框上弹出了的，才报这个错的。设置选项为，并通过选项来指定主要的和次要的用户动作。总之，问题解决了。昨天修改alert弹出的警告太难看了，改用dialog对话框，然后就报了一个错： jquery-2.0.2.min.js:5 Uncaught RangeError: Maximum call stack ...

jokester 2019-08-20 11:36 评论0 收藏0
潜在的恶意：前端弹窗类组件的键盘操作

摘要：而当用户使用键盘操作，焦点发生变化后，当前焦点在哪一项上，必须给出明确的视觉提示，否则极容易带来困难，甚至误操作。回车键按下时，则会到相应账号，或者取消操作关闭弹出层。再来看看组件库的组件中的确认消息。本文作者:文蔺原文地址:http://www.wemlion.com/2016/a...本文由 @文蔺创作，转载请保留此声明。所有权利保留，请勿用于商业目的。问题提出需要说明的是...

tinylcy 2019-08-22 10:46 评论0 收藏0
关于 vue 弹窗组件的一些感想

摘要：最近是用开发了一套组件库在开发过程对对于组件化的开发有一些感想，于是开始记录下这些。弹窗组件一直是开发中必备的，使用频率相当高，最常见的莫过于，，这些曾经我们都会用来调试程序不同的组件库对于弹窗的处理也是不一样的。最近是用 vue 开发了一套组件库 vue-carbon , 在开发过程对对于组件化的开发有一些感想，于是开始记录下这些。弹窗组件一直是 web 开发中必备的，使用频率相...

idealcn 2019-08-22 10:36 评论0 收藏0