twitter-bootstrap-modal

Demostrating issues #143 and #144 in bootstrap-select.

by Korah Babu Varghese

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
    <div class="container">

        <h3>Modal Example</h3>

        <!-- Button to trigger modal -->
        <div>
            <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
        </div>

        <!-- Modal -->
        <div id="myModal1" class="modal hide hy" tabindex="-1" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">
                
                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>

    </div>

<style>

CSS

.btn-group {
    z-index: 1051;
}
.hy{
    right: 0;
    margin: 0;
    left: 0;
    border-radius: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: inherit;
}

JavaScript

$('#myModal1 .selectpicker').selectpicker();

//$(document).on('focusin.modal', '[data-toggle=dropdown], [role=menu]', function (e) { e.stopPropagation() });