BootStrap模态框，点击保存后实现模态框自动关闭的思路

最新推荐文章于 2023-07-03 10:17:49 发布
最新推荐文章于 2023-07-03 10:17:49 发布
阅读量9.3k 收藏 3
点赞数 2
分类专栏： BootStrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hi_Boy_/article/details/78085219
版权

需求如下：


在弹出的模态框中点击 “更换” 按钮后 实现模态框自动关闭，


做法：给“更换“按钮加上：data-dissmiss="modal"

 

<button  type="button" class="btn btn-primary btn-sm"data-dismiss="modal"  >更换</button>

 



 


                

        

        

    

  


    

      

        

            

              
                
                  一个很酷的人
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
ssm框架自测试题

				
			

			

				

					weixin_43880780的博客
				

				

					11-12
					
					9480
					
				

			

		

		

			
				
**夕瑶不会java**

第1章	Spring的基本应用
习题
一、	填空题

依赖注入的作用就是在使用Spring框架创建对象时，动态的将其所依赖的对象注入到【      】组件中。
在使用Spring框架之后，对象的实例不再由调用者来创建，而是由【      】来创建，Spring容器会负责控制程序...

			
		

	



                

              
                



	

		

			

				
					
如何打造自动驾驶的数据闭环

				
			

			

				

					fishmai的专栏
				

				

					09-20
					
					3531
					
				

			

		

		

			
				
最近自动驾驶和数据闭环结合在一起，原因是自动驾驶工程已经被认可是一个解决数据分布“长尾问题”的任务，时而出现的corner case（极端情况）是是对数据驱动的算法模型进行升级的来源之一，如图所示。构成这个自动驾驶数据闭环的核心技术和模块都有哪些呢？首先是这个自动驾驶的算法和模块是数据驱动的，其次源源不断的数据需要有合理有效的方法去利用。如图是Tesla众所周知的Autopilot数据引擎框架：确认模型误差、数据标注和清洗、模型训练和重新部署。这是谷歌waymo报告提到的数据闭环平台：其中有数据挖掘、主动学

			
		

	



                


  
              

                


	

		

			

				
					
使用js弹出模态窗口，提交保存数据后关闭模态窗口，刷新父窗口

				
			

			

				

					昊谦粑粑
				

				

					08-01
					
					7092
					
				

			

		

		

			
				
首先，点击按钮弹出模态窗口
   
  function modify(){
      var obj=window.showModalDialog('selfInfoSysUser.action', null, 'dialogWidth=400px;dialogHeight=338px');
      if(obj==1){
            window.location.

			
		

	





	

		

			

				
					
bootstrap模态框设置保存后自动关闭

				
			

			

				

					hikankan的博客
				

				

					03-24
					
					3775
					
				

			

		

		

			
				
Bootstrap模态框设置保存后自动关闭
我们在写项目时，每次进入模态框点击提交后，都需要手动去点击关闭，这样很麻烦，在BootStrap中有一个属性可以满足点击提交直接关闭模态框，不用手动关闭。
1. 方法一：
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Mo

			
		

	



		

			
		



	

		

			

				
					
为什么保存后要关闭页面

				
			

			

				

					大音希声，大道无形
				

				

					06-15
					
					342
					
				

			

		

		

			
				
我是个VB程序员出身,因此做web新增页面时总喜欢在保存之后,直接切换到编辑页面,因为窗体应用就是这样的。直到今天我才恍然大悟，这样是有问题的。
 
当页面跳转到编辑页面，如果用户此时刷新页面，之前的新增提交又会执行一遍，造成了重复提交。而且这种提交对于服务端是无法判断的，因为对于它来说就是一次正常的提交。
 
要避免这种情况发生，最简单的就是提交后，返回成功提示页面，待用户确认后直接关闭...

			
		

	





	

		

			

				
					
利用bootstrap实现消息提示框的自动弹出与关闭

				
			

			

				

					ONEMORE6499的博客
				

				

					03-16
					
					3242
					
				

			

		

		

			
				
- 相关的依赖：
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script...

			
		

	





	

		

			

				
					
Vue3控制模态框打开关闭的三种方法

					
最新发布

				
			

			

				

					Anorry的博客
				

				

					07-03
					
					3856
					
				

			

		

		

			
				
主要讲了实现控制子组件的模态框打开关闭的三种方法

			
		

	





	

		

			

				
					
BootStrap点击保存后实现模态框自动关闭的思路(模态框)

				
			

			

				

					08-29
				

			

		

		

			
				
为了实现点击“保存”按钮后自动关闭模态框，我们需要在按钮上添加`data-dismiss="modal"`属性。这个属性告诉Bootstrap，当该按钮被点击时，应该关闭模态框。例如，我们可以创建以下HTML代码：  ```html         ...

			
		

	





	

		

			

				
					
jQuery 三  jQuery事件注册、处理、绑定on()、解绑 off()、自动触发事件 trigger() ；事件对象——阻止冒泡、默认行为 ；对象拷贝extend；多库共存，插件，本地存储案例

				
			

			

				

					m0_55170432的博客
				

				

					03-23
					
					323
					
				

			

		

		

			
				
1. jQuery 事件注册
		语法：
		element.事件(function(){事件处理程序})

        1. 单个事件注册
        $("div").click(function() {
            $(this).css("background", "purple");
        });
        $("div").mouseenter(function() {
            $(this).css("background", "skyblu

			
		

	





	

		

			

				
					
Bootstrap 模态框中加入的按钮不能实现点击事件？获取不到模态框中的内容？

				
			

			

				

					Duktig的博客
				

				

					05-12
					
					7983
					
				

			

		

		

			
				
Bootstrap 模态框中加入的按钮不能实现点击事件？获取不到模态框中的内容？
问题描述：
小编在使用Bootstrap的过程中，遇到了一个百思不得其解的问题。在.modal-footer的div里边放置了
两个<button>的按钮，但是在给其添加按钮的点击事件的时候总是失败（事件不被执行）。然后尝试获取
.modal-body的div里的内容也是失败。

原因：
<div ...

			
		

	





	

		

			

				
					
bootstrap中的模态框（modal，弹出层）

				
			

			

				

					weixin_44378954的博客
				

				

					03-14
					
					913
					
				

			

		

		

			
				
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。
默认的modal示例：
&lt;!DOCTYPE html&gt;  
&lt;html lang="zh-CN"&gt;  
&l...

			
		

	





	

		

			

				
					
bootstrap 模态框怎么去设置点击保存后关闭模态框

				
			

			

				

					Sue_Liang的博客
				

				

					06-25
					
					7631
					
				

			

		

		

			
				
$(‘#yourModal’).modal(‘hide’);

			
		

	





	

		

			

				
					
Bootstrap 模态框自定义点击和关闭事件

					
热门推荐

				
			

			

				

					小白
				

				

					02-03
					
					3万+
					
				

			

		

		

			
				
模态框避免点击背景处关闭： 
1、div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”

div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true' data-backdrop='st

			
		

	





	

		

			

				
					
bootstrap modal显示多次保存时会提交多次

				
			

			

				

					一只喜欢学习的猪仔
				

				

					11-14
					
					1062
					
				

			

		

		

			
				
$(function() { $('#modal-click-error').on('click', function() { $('#myModal').modal('show'); $("#myModal .btn-primary").on('click', function() { alert("提交"); }); }); });

改为
$(function() { $('#modal-c...

			
		

	





	

		

			

				
					
巧妙关闭iView的Modal框

				
			

			

				

					harmsworth的博客
				

				

					07-19
					
					5582
					
				

			

		

		

			
				
前言
在使用 iView 的 Modal 框时，需要给 Modal 框传递一个变量，用于控制显示与隐藏。然后，这个变量由父组件传递给子组件 Modal 框，每次都需要调用父组件的函数修改该变量的值，多调用了一个函数。问：只需父组件传递一个变量给 Modal 框，无需调用函数，就能显示与隐藏 Modal 框。实现如下：
环境

Vue 2.5.2
iView 3.4.1
less 3.9.0

在 ...

			
		

	





	

		

			

				
					
解决bootstrap模态框数据缓存问题

				
			

			

				

					LvKuiSir的博客
				

				

					01-19
					
					9189
					
				

			

		

		

			
				
问题背景第一步进行新增验证第二步进行修改模态框  验证信息没有消除 且表单数据被缓存模态框代码：新增修改共用一个模态框															×													标题																														单位名称																																						关闭				提交						js代码//验证设置$(functi

			
		

	





	

		

			

				
					
使用Ajax与Bootstrap模态框实现分页效果

				
			

			

				

					
				

			

		

		

			
				
本文主要介绍如何使用Ajax技术实现分页效果，并结合Bootstrap模态框进行展示，提供了一段示例代码以供参考。  在Web开发中，为了提高用户体验，我们通常会采用Ajax来实现页面的无刷新分页，这样用户在浏览大量数据时...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 8

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值