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

栏目分类：其他教程    发布日期：2023-09-05    浏览次数：397次     收藏

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

获取焦点事件：

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

对话框的层html：

<div id="my_to_alert" >
  <input name="www.19jp.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()
	});
}

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