twitter-bootstrap-modal

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

by Leonardo Trimarchi

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="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css">
    <div class="container">

        <h3>Modal Example</h3>

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

        <!-- Modal -->
        <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Model One</h3>
            </div>
            <div class="modal-body" data-bind="visible:check">
                <p>You want to open form ?</p>
 <button class="btn btn-primary" data-bind="click:function(){open()}">Yes</button>
 <button class="btn btn-primary" data-bind="click:hideContent">No</button>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true" data-bind="click:closeModel1">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        
        <div id="myModal2" class="modal hide" tabindex="-2" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Model Two</h3>
            </div>
            <div class="modal-body">
            </div>
            <div...

CSS

.btn-group {
    z-index: 1051;
}

JavaScript

var vm = function(){
var self=this;
    self.check=ko.observable(true)
    self.open=function(){
   $('#myModal2').show(); 
    }
    self.hideContent=function(){
    self.check(false)
    }
    self.showModel1=function(){$('#myModal1').show();self.check(true) }
     self.closeModel1=function(){$('#myModal1').hide();}
    self.closeModel2=function(){$('#myModal2').hide(); self.check(false)}
}

ko.applyBindings(new vm())