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

前端开发   发布日期:2023年05月28日   浏览次数:347

本文讲解如何在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()
	});
}

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

以上就是bootstrap用命令modal('show')弹出模态层后执行获取焦点事件的详细内容,更多关于bootstrap用命令modal('show')弹出模态层后执行获取焦点事件的资料请关注九品源码其它相关文章!