When call modal popup I need to focus on the first button on the modal.
The button is dynamically appended to the modal footer

var difVal = ( totalAmnt - payAble ).toFixed(2);         
$('#chqMsgContent').html( 'Total Diffrent than the Recive Amount. ( ' + difVal + ' )</br> (Please type manually for over payment) ');        
$('#myModal').modal('show');
$('.modal-dialog').css('width', '350');     
var btnsForModl = '<input type="button" class="btn  btn-xs ok" id="okDif" data-dismiss="modal" value="Ok" data-value="Cash" /> ';       
$('.modal-footer').html(btnsForModl);   

$('#okDif').focus();                

$('#okDif').focus(); not worked than I have tried this on

$('#myModal').on('shown', function () {
     alert($('#okDif').val());
     $('#okDif').focus();
}); 

Both of the methods are not working, but the popup window is working fine.

JSFiddle demo

When call modal popup I need to focus on the first button on the modal.
The button is dynamically appended to the modal footer

var difVal = ( totalAmnt - payAble ).toFixed(2);         
$('#chqMsgContent').html( 'Total Diffrent than the Recive Amount. ( ' + difVal + ' )</br> (Please type manually for over payment) ');        
$('#myModal').modal('show');
$('.modal-dialog').css('width', '350');     
var btnsForModl = '<input type="button" class="btn  btn-xs ok" id="okDif" data-dismiss="modal" value="Ok" data-value="Cash" /> ';       
$('.modal-footer').html(btnsForModl);   

$('#okDif').focus();                

$('#okDif').focus(); not worked than I have tried this on

$('#myModal').on('shown', function () {
     alert($('#okDif').val());
     $('#okDif').focus();
}); 

Both of the methods are not working, but the popup window is working fine.

JSFiddle demo

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow edited Sep 12, 2015 at 8:44 Artur Filipiak 9,15744 gold badges3232 silver badges5656 bronze badges asked Sep 12, 2015 at 6:22 Nasik AhdNasik Ahd 79811 gold badge1010 silver badges2424 bronze badges 4

• can you post a fiddle jsfiddle? – kurt Commented Sep 12, 2015 at 6:35
• there is a big process to get the pop up in my system is it possible to post the plete page on jsfiddle – Nasik Ahd Commented Sep 12, 2015 at 7:07
• jsfiddle/nsk21/DTcHh/12012 – Nasik Ahd Commented Sep 12, 2015 at 7:26
• Ok this has me stumped. There something weird going on – kurt Commented Sep 12, 2015 at 7:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Anything inside the modal is initially hidden, therefore the input element (as hidden) cannot have focus on.
If you don't need the modal to be animated, you could simply remove the fade class of the modal, so that the modal content is visible right away after you call .modal('show').
JSFiddle

---

The other option which you have tried won't work because bootstrap modal has no event called shown.
It has a shown.bs.modal event:

$('#myModal').on('shown.bs.modal', function(e){
    $('#okDif').focus();
});

JSFiddle

You need to add a slight timeout for the focus mand, as otherwise it fires before the element is present.

This works:

$(document).on('click', '#on', function(){  
  $('#chqMsgContent').html('Total Diffrent than the Recive Amount');         
  ...
  setTimeout(function(){ 
    $("#okDif").focus();
  }, 150);
});

DEMO