欢迎您来到,李雷博客 | PHP博客        登录  |  注册

bootstrap用命令modal('show')弹出模态层后执行获取焦点事件

更新:2023-01-08 14:16:04
人气:64
来源:本站原创
A+

本文讲解如何在bootstrap框架中用命令调用modal('show')弹出模态层对话框后执行事件,比如让弹出层后在指定的文本框中获取焦点。如果将modal('show')和$('#mdaima').focus()一起顺序执行是无法达到预期效果的。而bootstrap框架中也有对应的事件,用下面的代码即可实现:

获取焦点事件:

function get_focus(){
	$('#caiji_url').focus()
}

对话框的层html:

<div id="my_to_alert" >
  <input name="www.mdaima.com" type="text" id="caiji_url" value="李雷博客" class="input length_6" />
</div>

核心弹出层并获取焦点的事件:

function show_hide_m(){
	$('#my_to_alert').modal('show');//执行弹出模态层
	
	$('#my_to_alert').on("shown.bs.modal",function(e){//在模态层弹出之后,做对应的动作,即指定文本框获取焦点
		get_focus()
	});
}

就这么简单,只是网上有些介绍太片面,很少讲示例结合起来用的实际代码。

推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
  Ads by Google
  联系博主
Hello,本博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架!
QQ:858353007   微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2023 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号-4