In jQuery, you set focus with [`.focus()`][1] not [`.select()`][2]  
Also, in Bootstrap 3, the shown event is called [`shown.bs.modal`][3]

So the code should look like this:

    $('#searcherCustomerModal').on('shown.bs.modal', function () {
        $("#txtNameCustomer").focus();
    });


**Demo in Stack Snippets**:





    $('#searcherCustomerModal').on('shown.bs.modal', function () {
        $("#txtNameCustomer").focus();
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#searcherCustomerModal">
      Launch demo modal
    </button>

    
    <div class="modal fade" id="searcherCustomerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          
          <div class="modal-body">
            <input type="text" id="txtNameCustomer" class="form-control" />
          </div>
          
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
          
        </div>
      </div>
    </div>



[1]:http://api.jquery.com/focus/
[2]: http://api.jquery.com/select/
[3]: http://getbootstrap.com/javascript/#modals-events

I need to set focus on a control inside the modal after the show modal event. 

Here's the code I have so far:

    $('#searcherCustomerModal').on('shown', function () {
        $("#txtNameCustomer").select();
    });

But it does not work. Any Ideas?

Set focus to control after show modal

### Problem

The script currently shows a brief [Flash of Unstyled Content (FOUC)][1] because you're tapping into the **shown** event which, according to the [Bootstrap Modal Events][3]:

> `show.bs.modal` is fired when the modal has been made visible to the user  
(will wait for CSS transitions to complete). 

The only reason it *appears* to work after the first try, is because the `position()` function will leave the position as part of the markup

So this:



    <div class="modal" >

Will become this:



    <div class="modal" style="top: 34px; left: 104px;" >

And it will pick up where it left off and *then* attempt to reposition.  However, this is only good when the modal doesn't need to change between requests.

### Solution - Part 1

Instead, of waiting until it's rendered, you need to tap into the **`show.bs.modal`** event which will fire before the element is shown and reposition at this time.

The rub, is that at this moment in time, the modal is hidden, and according to the documentation on [jQuery UI - Position][2]:

> jQuery UI does not support positioning hidden elements.

### Solution - Part 2

As a workaround, according to this [Stack Overflow question on jQuery ui positioning keep changing][4], you can style the modal as an invisible block to help in calculating position:



    .modal {
       display: none,
       visibility: visible
    }

### Solution - Part 3

Additionally, there's no need to re-attach the `.on()` listener for every click of the button.  That initialization should happen in the beginning and then rely on the event handling to call the correct method.  This does introduce the additional problem that you can no longer pass the button into the event handler through the function scope.  

So instead you need to add the calling button to the modal as a data parameter like this:



    $('#MyModalWindow').data("source", $(this))

So you can read it in the event handling like this:



    .position({
       my: 'left top',
       at: 'right bottom',
       of: $(this).data("source")
    })

### Here's a demo in Stack Snippets





    $('#MyModalWindow').on('show.bs.modal', function(e) {
      $(this)
      .css({
        'display': 'block',
        'visibility': 'hidden'
      })
      .position({
        my: 'left top',
        at: 'right bottom',
        of: $(this).data("source")
      })
      .css({
        'visibility': 'visible'
      });
    })

    $('.my-element').click(function(){
      $('#MyModalWindow')
        .data("source", $(this))
        .modal();
    });



    .modal-backdrop.modal-backdrop {
      background-color: transparent
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


    <button type="button" class="btn btn-primary my-element" >
      Open modal
    </button><br/><br/>

    <button type="button" class="btn btn-primary my-element">
      Open modal
    </button>


    <div class="modal fade" tabindex="-1" role="dialog" id="MyModalWindow" >
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-body">
            Modal Content
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>




[1]: http://en.wikipedia.org/wiki/Flash_of_unstyled_content
[2]: http://api.jqueryui.com/position/
[3]: http://getbootstrap.com/javascript/#modals-events
[4]: https://stackoverflow.com/a/8324628/1366033

I'm having some problems with Bootstrap modal. The first time calling my modal, it's positioned about 20px to the left, but after that it's positioned correctly according to [`.position()`][1]

Here's my code:

**HTML**:



    <div class="modal hide" id="AddCommentChat">
        <div class="modal-body">
            <div class="my-element"></div>
        </div>
    </div>
    <div class="modal hide" id="MyModalWindow"></div>

**JavaScript**:



    $('.my-element').click(function(){
      var that = $(this);
      $('#MyModalWindow').on('shown.bs.modal', function(){
        $(this).position({
          my: 'left top',
          at: 'right bottom',
          of: that
        });
        $('.modal-backdrop').css('background-color', 'transparent');
      }).modal();
    }); 

**Update**:
The problem was solved by adding the next code:

            $('#ModalEditingDeleting').css({
                left: 0,
                top: 0
            });
The final code is:

        $('.comment-manage').click(function(){
            $('#ModalEditingDeleting').css({
                left: 0,
                top: 0
            });
            var that = $(this);
            $('#ModalEditingDeleting').on('shown.bs.modal', function(){
                $(this).position({
                    my: 'left top',
                    at: 'right top',
                    of: that
                });
                $('.modal-backdrop').css('background-color', 'transparent');
            }).modal();
        });

 
Thanks for your help!

[1]: https://jqueryui.com/position/

function in shown.bs.modal works only after second time calling of modal

### Problem

If you're executing `$("#select2_content").select2({})` on the initial page load then `#select2_content` doesn't exist yet.  So the jQuery expression doesn't find anything and consequently will never initialize the select box.  Then it will never run again.

### Solutions

You can do either of the following:

1. When you've finished loading the modal via ajax, you need to tap into the [`loaded.bs.modal` event][7] and run a function to initialize select2 on any new elements.

2. Or you can pull in the function via a `<script>` tag in the ajax call that will be executed when the DOM parses the code brought in over ajax.  Just make sure to add the script tag at the end or wrap the javascript in a document ready function otherwise it still won't exist in the dom.

### Option 1

[Here's a plunker][4] that returns the following code:

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="exampleModalLabel">AJAX Modal</h4>
      </div>
      <div class="modal-body">
        <select id="select2_content" class="form-control select2">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

For ajax calls, you can access a running version of it at the following url: 
 
[http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/][5]

[Here's a plunker][6] that consumes the AJAX call with the following code:

    <!DOCTYPE html>
    <html>
    
      <head>
        <title>Bootstrap Modal AJAX Demo</title>
        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
        <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
        
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
        <script>
          $(function(){
            $('#ajax').on('loaded.bs.modal', function (e) {
              $("#select2_content").select2({
               allowClear: true
              });
            })
            .modal({
              show: false,
              remote: 'http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/'
            });
          });
        </script>
      </head>
    
      <body>
        
        <btn data-target="#ajax" data-toggle="modal" class="btn btn-primary">
          Load Select
        </btn>
        
        <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
           <div class="modal-dialog">
              <div class="modal-content"></div>
           </div>
        </div>
        
      </body>
    
    </html>




### Option 2

[Here's a plunker][1] that returns the following code:

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="exampleModalLabel">AJAX Modal</h4>
      </div>
      <div class="modal-body">
        <select id="select2_content" class="form-control select2">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <script>
      $("#select2_content").select2({
       allowClear: true
      });
    </script>

For ajax calls, you can access a running version of it at the following url: 
 
[http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/][2]

[Here's a plunker][3] that consumes the AJAX call with the following code:

    <!DOCTYPE html>
    <html>
    
      <head>
        <title>Bootstrap Modal AJAX Demo</title>
        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
        <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
        
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
      </head>
    
      <body>
        
        <a href="http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/"
           data-target="#ajax" data-toggle="modal" class="btn btn-primary">
          Load Select
        </a>
        
        <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
           <div class="modal-dialog">
              <div class="modal-content"></div>
           </div>
        </div>
        
      </body>
    
    </html>



[1]: http://plnkr.co/edit/lpyMAERThlKeNieoX8GH?p=preview
[2]: http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/
[3]: http://plnkr.co/edit/wnxXGmz89fCbKoJiV0ET?p=preview

[4]: http://plnkr.co/edit/bq15voV79PEz07TWrS8D?p=preview
[5]: http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/
[6]: http://plnkr.co/edit/xLhImsALFIBGGVOo4sii?p=preview

[7]: http://getbootstrap.com/javascript/#modals-events

I'm loading a [Bootstrap Modal][1] with AJAX. The result modal works perfectly, but the [Select2][2] box that gets loaded in does not initialize.

How can I fix it?

### Here's my code:

**index.php** (html):



    <a href="content.php" data-target="#ajax" data-toggle="modal" class="btn green">
      Load Select
    </a>

    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content"></div>
       </div>
    </div>

**index.php** (js):



    $("#select2_content").select2({
       allowClear: true
    }); 


**content.php**:



    <select name="content" id="select2_content" class="form-control select2">
      <option value="A">A</option>
        ...
      <option value="Z">Z</option>
    </select>


[1]: http://getbootstrap.com/javascript/#modals
[2]: https://select2.github.io/

Error loading jQuery select2 when using jquery Bootstrap modal with ajax loaded content

It's probably easier to leave the listeners attached and then conditionally exit them if the modal is open.

You could setup something like this:

    var modalIsOpen = false
    $('#myModal').on('shown.bs.modal', function(e) { modalIsOpen = true;})
    $('#myModal').on('hidden.bs.modal', function(e) { modalIsOpen = false;})

Then just copy and paste the following line into all of your listeners.
    
    if (modalIsOpen) return;

### Demo in Stack Snippets





    var modalIsOpen = false
    $('#myModal').on('shown.bs.modal', function(e) { modalIsOpen = true;})
    $('#myModal').on('hidden.bs.modal', function(e) { modalIsOpen = false;})

    var listener = new window.keypress.Listener();

    listener.simple_combo("s", function() {
      if (modalIsOpen) return;
      alert("You hit 's'");
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="http://cdn.rawgit.com/dmauro/Keypress/master/keypress.js"></script>


    
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>

    
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Don't Act On Key Presses</h4>
          </div>
          <div class="modal-body">
            Try Hitting S
          </div>
        </div>
      </div>
    </div>

    <p>Try Hitting S</p>

I'm trying to combine the [Keypress plugin][1] with [Modal dialogs in Bootstrap][2].  Based on this question, I can [check if modal is open or closed using jquery][3].

However, I need to execute Keypress *only* if modal is closed.  If it's open, I don't want to listen for keypresses.

**Here's my code so far**:



    if(!$("#modal").is(':visible')) {

      var listener = new window.keypress.Listener();

      listener.simple_combo("enter", function() {
        console.log('enter');
      });

      // I have over 20 other listeners
    }


[1]: http://dmauro.github.io/Keypress/
[2]: http://getbootstrap.com/javascript/#modals
[3]: https://stackoverflow.com/q/24949383/

Check if Bootstrap Modal currently Show

You'll want to have the dropdown datepicker appear as part of the regular document flow, that way it will occupy space and the tab picker will automatically make room for it.  It doesn't do that currently because it uses `.dropdown-menu`, to which Bootstrap adds [`position: absolute;`][1]

Just override like this:

    .dropdown-menu[datepicker-popup-wrap] {
        position: static;
    }

There are some other stylistic things you can do, but that is the basic principle.

[**Demo in jsFiddle**][2]

[1]: https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less#L32
[2]: http://jsfiddle.net/KyleMit/m3y9cfm7/2/

I have a modal window with angular-material tabs and a ui-bootstrap datepicker. When I open datepicker, the text field moves up, and I cannot access either the datepicker or the field.

[**Here's a demo in jsFiddle**][1]

Here's my code:




    var app = angular.module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngAria', 'ngMaterial'])
    .controller('myController', function ($scope, $modal) {
      $scope.showModal = function () {
        var modalInstance;
        modalInstance = $modal.open({
          templateUrl: "addNew.html",
          controller: 'myController2',
          size: 'lg'
        });
      };
      $scope.showModal();
    })
    .controller('myController2', function ($scope, $modal) {
      $scope.datepickers = {
        start: false
      }

      $scope.openDatepicker = function ($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.datepickers[which] = true;
      };

      $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
      };

      $scope.dateFormat = 'mediumDate';
    });




    <div ng-app="myApp">
      <div ng-controller="myController">
        <script type="text/ng-template" id="addNew.html">
          <div class="modal-body">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">Add</h3>
              </div>
              <div class="panel-body">
                <md-tabs md-dynamic-height md-border-bottom>
                  <md-tab label="date">
                    <div class="form-horizontal">
                      <div class="row">
                        <div class="col-md-6">
                          <div class="row form-group">
                            <label for="dateStart" class="col-sm-2 col-md-4 control-label">
                              Date&nbsp;Start
                            </label>
                            <div class="col-sm-10 col-md-8">
                              <div class="input-group ui-datepicker">
                                <input type="text"
                                       class="form-control"
                                       name="dateStart"
                                       id="dateStart"
                                       datepicker-popup="{{dateFormat}}"
                                       ng-model="campaign.dateStart"
                                       is-open="datepickers.start"
                                       datepicker-options="dateOptions"
                                       ng-required="true"
                                       ng-click="openDatepicker($event, 'start')"
                                       close-text="Close"/>
                                <span class="input-group-addon" ng-click="openDatepicker($event, 'start')">
                                  <i class="glyphicon glyphicon-calendar"></i>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </md-tab>
                  <md-tab label="other tabs"></md-tab>
                  <md-tab label="other tabs"></md-tab>
                  <md-tab label="other tabs"></md-tab>
                  <md-tab label="other tabs"></md-tab>
                </md-tabs>
              </div>
            </div>
          </div>
        </script>
      </div>
    </div>


I used a css trick to [add the scroll bar in this fiddle][2], but it's not very neat. So I was wondering if there is a way to expand the tab height when the datepicker is opened or the datepicker is shown over a modal window like the select window opens.


  [1]: http://jsfiddle.net/salalaslam/m3y9cfm7
  [2]: http://jsfiddle.net/salalaslam/m3y9cfm7/1/