我已经看到了一些有关引导程序模式的问题,但是没有一个完全像这样,所以我继续。
我有一个模态,我这样称呼onclick ...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
效果很好,但是当我显示模态时,我想关注第一个输入元素...在某些情况下,第一个输入元素的ID为#photo_name。
所以我尝试了
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
但这无济于事。最后,我尝试绑定到“ show”事件,但是即使如此,输入也不会集中。最后,仅出于测试目的,因为我怀疑这与js加载顺序有关,因此我设置了setTimeout只是为了查看是否延迟一秒钟,焦点会起作用,是的,它起作用了!但是这种方法显然是胡扯。有什么方法可以在不使用setTimeout的情况下达到与以下相同的效果?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
尝试这个
这是旧的DEMO:
编辑:(
这是使用Bootstrap 3和jQuery 1.8.3的有效演示版)
$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});
启动引导程序3需要使用shown.bs.modal事件:
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
只是想说Bootstrap 3处理这个问题有所不同。事件名称为“ shown.bs.modal”。
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
或将焦点放在第一个可见的输入上,如下所示:
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
http://getbootstrap.com/javascript/#modals
我在布局中使用它来捕获所有模态,并专注于第一个输入
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
Probably it´s something about the animation!
我遇到了“ shown.bs.modal”事件的问题。这是我的完美解决方案。
而是简单的on():
$('#modal').on 'shown.bs.modal', ->
将on()与委托元素一起使用:
$('body').on 'shown.bs.modal', '#modal', ->
似乎是因为启用了模态动画(fade
在对话框的类中),调用后.modal('show')
,该对话框不会立即可见,因此此时无法获得焦点。
我可以想到两种解决此问题的方法:
fade
从类中移除,因此调用后,对话框立即可见.modal('show')
。您可以查看http://codebins.com/bin/4ldqp7x/4进行演示。(对不起,@ keyur,我错误地将其编辑并另存为示例的新版本)- 像@keyur所写的那样
focus()
在shown
事件中调用。
我创建了一种动态方式来自动调用每个事件。专注于某个领域非常理想,因为它只调用一次事件,使用后将其删除。
function modalEvents() {
var modal = $('#modal');
var events = ['show', 'shown', 'hide', 'hidden'];
$(events).each(function (index, event) {
modal.on(event + '.bs.modal', function (e) {
var callback = modal.data(event + '-callback');
if (typeof callback != 'undefined') {
callback.call();
modal.removeData(event + '-callback');
}
});
});
}
您只需要调用modalEvents()
文档即可。
用:
$('#modal').data('show-callback', function() {
$("input#photo_name").focus();
});
因此,您可以使用相同的模式来加载所需的内容,而不必担心每次都会发生remove事件。
我对bootstrap 3遇到了同样的问题,并像这样解决了:
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
Bootstrap添加了一个加载事件。
https://getbootstrap.com/docs/3.3/javascript/#modals
捕获模态上的“ loaded.bs.modal”事件
$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
引导模态秀事件
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
一个更干净,更模块化的解决方案可能是:
$(document).ready(function(){
$('.modal').success(function() {
$('input:text:visible:first').focus();
});
});
或以您的ID为例:
$(document).ready(function(){
$('#modal-content').modal('show').success(function() {
$('input:text:visible:first').focus();
});
});
希望有帮助。
文章标签:javascript , modal-dialog , twitter-bootstrap
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!