In Visual Basic, the project properties are structured a little differently.  If you find this question and you're in VB in VS2010, follow these instructions to generate an *app.manifest* file.

1. To create an **app.manifest** file, go to your project, and select properties.  Then click on **View Window Settings**, under the *Application* tab.
 * ![ViewWindowSettings][ViewWindowSettings]
2. This should generate and open the **app.manifest** file, which is saved in your **My Project Folder**
 * ![app.manifest][app.manifest]

**Further Reading:** [WPF MessageBox window style][StackOverflow]

[ViewWindowSettings]: http://i.imgur.com/o75ycPB.png
[app.manifest]: http://i.imgur.com/RTxchBn.png
[StackOverflow]: https://stackoverflow.com/a/19187421/1366033

I posted [a comment to Microsoft][1] that the Dialog Boxes in WPF are not VisualStyle enabled.

Joe Castro posted a workaround there which I don't really understand how to achieve, can anyone help?

**Here is he's response:**

For app compat reasons applications don't by default use v6 of the system common controls (available since XP). This doesn't really apply to WPF, but you also only see it in a few situations when using the native controls so it's not as prevalent as WinForms where their APIs are just wrapping the standard controls.

To fix this in WPF you need to explicitly opt-in to v6 comctl32 by specifying it in a manifest in your exe. This has to be done on the exe, so WPF can't do it as part of their DLLs. EnableVisualStyles does this at runtime but this way is generally better.

E.g., something like:

```xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
    <description>MyExe.exe</description>
    <dependency>
        <dependentAssembly>
            <assemblyIdentity
                type="win32"
                name="Microsoft.Windows.Common-Controls"
                version="6.0.0.0"
                processorArchitecture="*"
                publicKeyToken="6595b64144ccf1df"
                language="*"/>
        </dependentAssembly>
    </dependency>
</assembly>
```

  [1]: http://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=420920



Change WPF application manifest?

You can use another `data-` attribute to check whether it's loaded or not:

Add `isloaded="false"` to your anchor tag like so:



    <a data-isloaded="false" href="#myModal" role="button" class="btn" data-toggle="modal" 
       data-load-remote="http://localhost/dashboard/myprices" 
       data-remote-target="#myModal .modal-body">My Salon (Preview)</a>

Then you can check if it's been loaded using `$this.data('isloaded')`.  If it has, get out of there, if not, load it and set the flag like so: `$this.data('isloaded', true)`. 

Here's some JavaScript



<pre><code>$(function() {
    $('[data-load-remote]').on('click',function(e) {
        e.preventDefault();
        var $this = $(this);
        var remote = $this.data('load-remote');
        <b>if (!$this.data('isloaded')) {</b>
            if(remote) {
                $($this.data('remote-target')).load(remote);
                <b>$this.data('isloaded', true)</b>
            }
        }
    });
});
</code></pre>

[jsFiddle][fiddle]
====


-----


**UPDATE** for clarification based on comment


From the HTML5 spec on [**custom data attributes**][data-*]:

> Every *HTML element* may have any number of *custom data attributes* specified, with any value.

i.e. There is no predefined `data-isloaded`, the same as there is no predefined `data-load-remote`.  You could just as easily call it `data-kylePromisesTheValueIsLoaded`.  As long as
that's the string you pass to the [`.data()`][data] method, then it will read / write the value for that attribute.

[fiddle]: http://jsfiddle.net/KyleMit/6maV8/
[data-*]: http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

[data]: http://api.jquery.com/data/

I am using bootstrap 3 modal dialogs with remote sources.
My Problem is that I use external JavaScript and script blocks in those remote sources. When I open and Close a modal Dialog and then reopen it, the JavaScript is loaded twice.

How can I suppress from loading the same JavaScript file again when reopening the modal Dialog? Or how can I destroy the loaded JavaScript when closing the Dialog?

**JavaScript**:



    $(function() {
        $('[data-load-remote]').on('click',function(e) {
            e.preventDefault();
            var $this = $(this);
            var remote = $this.data('load-remote');
            if(remote) {
                $($this.data('remote-target')).load(remote);
            }
        });
    });

**HTML**:



    <a href="#myModal" role="button" class="btn" data-toggle="modal" 
       data-load-remote="http://localhost/dashboard/myprices"
       data-remote-target="#myModal .modal-body">My Salon (Preview)</a>
    
    
    <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-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
          </div>
        </div>
      </div>
    </div>

bootstrap 3 modal - javascript available multiple times

I think you just have a lot of typos here that tend to break Knockout bindings.

For instance:

1. You define <code>var <b>ViewModel</b> = function () {...}</code>
    * but then pass in <code>ko.applyBindings(new <b>ViewModal()</b>);</code>
2. Your view model uses the observable <code>self.<b>radioSelectedOption</b></code>
    * but your databinding uses <code>data-bind="checked: <b>radioSelectedOptionMessage"</b></code>
3. In your ViewModel, you check if the radio button has the value  <code>(self.radioSelectedOption() === "<b>optionPreDefined</b>"</code>
    * but that value isn't defined anywhere in your markup.

Once you shore up those issues, the resulting code should work:

# [Working Demo in jsFiddle](http://jsfiddle.net/KyleMit/p4nyV/)

Also, you don't have to pass in `this` as the second parameter to a computed property when using the [`var self = this`][managing this] trick.

[managing this]: http://knockoutjs.com/documentation/computedObservables.html#a-popular-convention-that-simplifies-things

I'm trying to apply knockout bidding to a modal popup.

I have the fowlling **ViewModel**:

    var ViewModel = function () {
        var self = this;
        self.radioSelectedOption = ko.observable("optionFreeText");

    
        // It only show textarea when free text message option value is selected
        self.hasFreTextMessageSelected = ko.computed(function () {
            return (self.radioSelectedOption() === "optionFreeText");
        });    
    }

And the **HTML Modal** below:



    <section id="test-modal" class="modal fade" tabindex="-1" data-width="760">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Enviar Mensagem</h4>
        </div>
        <div class="modal-body">
            <div class="form-body">
                <div class="form-group">
                    <label>Tipo de Mensagem</label>
                    <div class="radio-list">
                        <label class="radio-inline">
                            <input type="radio"  data-bind="checked: radioSelectedOption" name="optionsRadiosMessageType" id="optionRadioFreeText" value="optionFreeText" class="make-switch optionsRadiosMessageType" checked>
                            Livre
                        </label>
                        <label class="radio-inline">
                            <input type="radio"  data-bind="checked: radioSelectedOption" name="optionsRadiosMessageType" id="optionRadioStateRefresh" value="optionStateRefresh" class="make-switch optionsRadiosMessageType">
                            Pedido de Estado
                        </label>
                    </div>
                </div>
                <div for="textareaFreeText" class="form-group" data-bind='visible: hasFreTextMessageSelected'>
                    <label>Texto</label>
                    <textarea id="textareaFreeText" class="form-control" rows="3"></textarea>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
            <button type="button" class="btn blue">Enviar</button>
        </div>
    </section>

Then in the event **on document ready**:

    ko.applyBindings(new ViewModal());

When I run the code the first time it works perfectly but after the first modal dispose it stop working. The ViewModel is never updated after the first dispose, but I can get the old values. 

It looks like the binding it is removed (but it isn't). If I try to binding it again I got the knockout exception "You cannot apply bindings multiple times to the same element"...

Applying binding to knockoutjs ViewModel in a bootstrap modal

Chris's answer is correct.  Changing the `div` to a `button` would help clarify your markup.  If, however, you need to keep the same markup, you can also add `cursor: pointer` to your div element to let safari know that this is something that might be clickable.  It also let's mouse users have a standard visual cue that the element is clickable as well.  

Just add the class `clickable` and then include the following CSS:

    .clickable {
        cursor: pointer;
    }

### [Here's an MCVE in Fiddle with the fix as well][fiddle]

<sup>notice I haven't used Bootstrap's `btn` classes here because they will add the `cursor` rule automatically.</sup>

[fiddle]: http://jsfiddle.net/KyleMit/76wvpv6p/

I am working on a website using Bootstrap and have a problem I can't seem to fix. Here is the [draft of the site](http://www.tbiq.com/envieta/).

On the "What We Do" panel, I made a clickable modal window on the first thumbnail box (it says "Enterprise Software development" under the thumbnail). If you click the thumbnail on a non-mobile device, a modal window will pop-up.

On a desktop computer (or laptop), it works just fine. But on a iOS (iPhone, iPad, etc.) it doesn't work at all: i.e. tapping it doesn't bring up the modal window.

However, if you look lower on the page at the "Who We are" panel, there is a "See more about Tim..." button. If you click *or tap* on that button, it will work across all devices (include iOS). 

The only difference I can see between the two is that the first one is on a `<div>` tag, whereas the second one is on a `<button>` tag.

Does Bootstrap not support starting up a modal window from a `<div>` on an iOS device? If it does, do you see anything wrong with my code that would make it fail only on iOS devices?

Bootstrap Modal does not work on iOS devices

> Can I override this behavior so that the class form-horizontal is working to the width of the modal, not the browser window?

In short, No.  The styles for `form-horizontal` are based on media queries run against the size of the window.  Media queries cannot be run against the size of other elements.  Of course, you can use javascript to figure out the size of other elements and change other elements accordingly, but you'd lose all the native performance benefits of using plain old CSS and letting the browser do the work.

> If the browser is maximised or large enough it alters the layout of the contents inside the modal so that the labels are now to the left of the fields

But that's exactly what horizontal forms do. If you don't want that kind of functionality, why don't you change it to a basic form? It sounds like, even if this wasn't space constrained by the modal window, this form would run into trouble if you have long label names and not enough column width to display them on a single line.

### Here's an example of a Horizontal Form in a Modal





    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
        Launch Horizontal Form
    </button>

    
    <div class="modal fade" id="myModalHorizontal" 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">
                           <span aria-hidden="true">&times;</span>
                           <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        Modal title
                    </h4>
                </div>
                
                
                <div class="modal-body">
                    
                    <form class="form-horizontal" role="form">
                      <div class="form-group">
                        <label  class="col-sm-2 control-label"
                                  for="inputEmail3">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" 
                            id="inputEmail3" placeholder="Email"/>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label"
                              for="inputPassword3" >Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control"
                                id="inputPassword3" placeholder="Password"/>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                          <div class="checkbox">
                            <label>
                                <input type="checkbox"/> Remember me
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                          <button type="submit" class="btn btn-default">Sign in</button>
                        </div>
                      </div>
                    </form>
                    
                </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>




[![Horizontal Screenshot][Horizontal Screenshot]][Fiddle-Show]




### Here's an example of a basic form that maintains it's structure at all screen sizes:





    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


    
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
        Launch Normal Form
    </button>

    
    <div class="modal fade" id="myModalNorm" 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">
                           <span aria-hidden="true">&times;</span>
                           <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        Modal title
                    </h4>
                </div>
                
                
                <div class="modal-body">
                    
                    <form role="form">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                          <input type="email" class="form-control"
                          id="exampleInputEmail1" placeholder="Enter email"/>
                      </div>
                      <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                          <input type="password" class="form-control"
                              id="exampleInputPassword1" placeholder="Password"/>
                      </div>
                      <div class="checkbox">
                        <label>
                            <input type="checkbox"/> Check me out
                        </label>
                      </div>
                      <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    
                    
                </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>




[![Basic Screenshot][Basic Screenshot]][Fiddle-Show]

Alternatively, you could try to override some of the styles that `.form-horizontal` applies if you don't have much control over the markup.  You could add some CSS like this (depending on the structure of your horizontal form)



    .modal-body .form-horizontal .col-sm-2,
    .modal-body .form-horizontal .col-sm-10 {
        width: 100%
    }
    
    .modal-body .form-horizontal .control-label {
        text-align: left;
    }
    .modal-body .form-horizontal .col-sm-offset-2 {
        margin-left: 15px;
    }

### Horizontal Form with CSS





    .modal-body .form-horizontal .col-sm-2,
    .modal-body .form-horizontal .col-sm-10 {
      width: 100%
    }

    .modal-body .form-horizontal .control-label {
      text-align: left;
    }
    .modal-body .form-horizontal .col-sm-offset-2 {
      margin-left: 15px;
    }



    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
        Launch Horizontal Form
    </button>

    
    <div class="modal fade" id="myModalHorizontal" 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">
                           <span aria-hidden="true">&times;</span>
                           <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        Modal title
                    </h4>
                </div>
                
                
                <div class="modal-body">
                    
                    <form class="form-horizontal" role="form">
                      <div class="form-group">
                        <label  class="col-sm-2 control-label"
                                  for="inputEmail3">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" 
                            id="inputEmail3" placeholder="Email"/>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label"
                              for="inputPassword3" >Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control"
                                id="inputPassword3" placeholder="Password"/>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                          <div class="checkbox">
                            <label>
                                <input type="checkbox"/> Remember me
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                          <button type="submit" class="btn btn-default">Sign in</button>
                        </div>
                      </div>
                    </form>
                    
                </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>



[![Horizontal Fix Screenshot][Horizontal Fix Screenshot]][Fiddle-Show]

### [Here's a Demo in jsFiddle][Fiddle]

[Album]: http://imgur.com/a/U66Jh
[Horizontal Screenshot]: http://i.imgur.com/sXa4ALa.png
[Basic Screenshot]: http://i.imgur.com/1Q7H3rL.png
[Horizontal Fix Screenshot]: http://i.imgur.com/Euwl6PK.png

[Fiddle-Show]: http://jsfiddle.net/KyleMit/0fscmf3L/show/

[Fiddle]: http://jsfiddle.net/KyleMit/0fscmf3L/

I have a form in a modal that formats perfectly if the main window is not too wide (with the labels above the fields). However, if the browser is maximised or large enough it alters the layout of the contents inside the modal so that the labels are now to the left of the fields (which means one word per line and looks very messy).

Any idea how I have overcome this behavior so that the class form-horizontal is working to the width of the modal, not the browser window?

**Update with code:** 

Here is the structure of the modal

    <div id="CCNewModal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                     <h4 id="CCTitle" runat="server" class="modal-title">New Credit Card</h4>
    
                </div>
                <div class="modal-body">
                    <div>
                        <fieldset>
                            <div id="selectCardDiv" class="form-group">
                                <label id="selectCardLabel" class="col-lg-2 control-label" for="selectCard">Card Type</label>
                                <div class="col-lg-10">
                                    <select class="form-control" id="selectCard" runat="server">
                                        <option value="0">Select Card</option>
                                        <option value="Amex">Amex</option>
                                        <option value="MasterCard">MasterCard</option>
                                        <option value="Visa">Visa</option>
                                    </select>
                                </div>
                            </div>
                            <div id="selectNameDiv" class="form-group">
                                <label id="selectNameLabel" class="col-lg-2 control-label" for="inputCCName">Name</label>
                                <div class="col-lg-10">
                                    <input class="form-control" id="inputCCName" runat="server" type="text" placeholder="Name (as on statement)">
                                </div>
                            </div>
                            <div id="selectNumberDiv" class="form-group">
                                <label id="selectNumberLabel" class="col-lg-2 control-label" for="inputCCNumber">Number</label>
                                <div class="col-lg-10">
                                    <input class="form-control" id="inputCCNumber" runat="server" type="text" placeholder="Credit Card Number (no spaces)">
                                </div>
                            </div>
                            <div id="selectMonthDiv" class="form-group">
                                <label id="selectMonthLabel" class="col-lg-2 control-label" for="selectMonth">Expiry Month</label>
                                <div class="col-lg-10">
                                    <select class="form-control" id="selectMonth" runat="server">
                                        <option value="0">Month</option>
                                        <option value="01">Jan</option>
                                        <option value="02">Feb</option>
                                        <option value="03">Mar</option>
                                        <option value="04">Apr</option>
                                        <option value="05">May</option>
                                        <option value="06">Jun</option>
                                        <option value="07">Jul</option>
                                        <option value="08">Aug</option>
                                        <option value="09">Sep</option>
                                        <option value="10">Oct</option>
                                        <option value="11">Nov</option>
                                        <option value="12">Dec</option>
                                    </select>
                                </div>
                            </div>
                            <div id="selectYearDiv" class="form-group">
                                <label id="selectYearLabel" class="col-lg-2 control-label" for="selectYear">Expiry Year</label>
                                <div class="col-lg-10">
                                    <select class="form-control" id="selectYear" runat="server"></select>
                                </div>
                            </div>
                            <div id="selectCVVDiv" class="form-group">
                                <label id="selectCVVLabel" class="col-lg-2 control-label" for="inputCVV">CVV</label>
                                <div class="col-lg-10">
                                    <input class="form-control" id="inputCVV" runat="server" type="text" placeholder="Security Code (CVV)">
                                </div>
                            </div>
                            <div id="selectBillingAddressDiv" class="form-group">
                                <label id="selectBillingAddressLabel" class="col-lg-2 control-label" for="inputBillingAddress">Billing Address</label>
                                <div class="col-lg-10">
                                    <textarea class="form-control" id="inputBillingAddress" runat="server" rows="3" placeholder="Address as on Statement"></textarea>
                                </div>
                            </div>
                            <div id="selectBillingCityDiv" class="form-group">
                                <label id="selectBillingCityLabel" class="col-lg-2 control-label" for="inputCCCity">City</label>
                                <div class="col-lg-10">
                                    <input class="form-control" id="inputCCCity" runat="server" type="text" placeholder="City">
                                </div>
                            </div>
                            <div id="selectBillingStateDiv" class="form-group">
                                <label id="selectBillingStateLabel" class="col-lg-2 control-label" for="selectState">State</label>
                                <div class="col-lg-10">
                                    <select class="form-control" id="selectState" runat="server">
                                        <option value="0">Select State</option>
                                        <option value="AL">Alabama</option>
                                        <option value="AK">Alaska</option>
                                        <option value="AZ">Arizona</option>
                                        <option value="AR">Arkansas</option>
                                        <option value="CA">California</option>
                                        <option value="CO">Colorado</option>
                                        <option value="CT">Connecticut</option>
                                        <option value="DE">Delaware</option>
                                        <option value="DC">District of Columbia</option>
                                        <option value="FL">Florida</option>
                                        <option value="GA">Georgia</option>
                                        <option value="HI">Hawaii</option>
                                        <option value="ID">Idaho</option>
                                        <option value="IL">Illinois</option>
                                        <option value="IN">Indiana</option>
                                        <option value="IA">Iowa</option>
                                        <option value="KS">Kansas</option>
                                        <option value="KY">Kentucky</option>
                                        <option value="LA">Louisiana</option>
                                        <option value="ME">Maine</option>
                                        <option value="MD">Maryland</option>
                                        <option value="MA">Massachusetts</option>
                                        <option value="MI">Michigan</option>
                                        <option value="MN">Minnesota</option>
                                        <option value="MS">Mississippi</option>
                                        <option value="MO">Missouri</option>
                                        <option value="MT">Montana</option>
                                        <option value="NE">Nebraska</option>
                                        <option value="NV">Nevada</option>
                                        <option value="NH">New Hampshire</option>
                                        <option value="NJ">New Jersey</option>
                                        <option value="NM">New Mexico</option>
                                        <option value="NY">New York</option>
                                        <option value="NC">North Carolina</option>
                                        <option value="ND">North Dakota</option>
                                        <option value="OH">Ohio</option>
                                        <option value="OK">Oklahoma</option>
                                        <option value="OR">Oregon</option>
                                        <option value="PA">Pennsylvania</option>
                                        <option value="RI">Rhode Island</option>
                                        <option value="SC">South Carolina</option>
                                        <option value="SD">South Dakota</option>
                                        <option value="TN">Tennessee</option>
                                        <option value="TX">Texas</option>
                                        <option value="UT">Utah</option>
                                        <option value="VT">Vermont</option>
                                        <option value="VA">Virginia</option>
                                        <option value="WA">Washington</option>
                                        <option value="WV">West Virginia</option>
                                        <option value="WI">Wisconsin</option>
                                        <option value="WY">Wyoming</option>
                                    </select>
                                </div>
                            </div>
                            <div id="selectBillingZipDiv" class="form-group">
                                <label id="selectBillingZipLabel" class="col-lg-2 control-label" for="inputCCZip">Zip / Postcode</label>
                                <div class="col-lg-10">
                                    <input class="form-control" id="inputCCZip" runat="server" type="text" placeholder="City">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label" for="inputCCCountry">Country</label>
                                <div class="col-lg-10">
                                    <input disabled="" value="United States" class="form-control" id="inputCCCountry" runat="server" type="text" placeholder="City">
                                </div>
                            </div>
                            <div id="selectTelephoneDiv" class="form-group">
                                <label id="selectTelephoneLabel" class="col-lg-2 control-label" for="inputCCTelephone">Telephone</label>
                                <div class="col-lg-10">
                                    <input class="form-control" id="inputCCTelephone" runat="server" type="text" placeholder="Telephone (format as 123-456-7890)">
                                </div>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input id="selectPrimaryCB" runat="server" type="checkbox" checked>Primary (default) card</label>
                            </div>
                        </fieldset>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
                    <button id="CreditCardSaveButton" runat="server" class="btn btn-primary" type="button">Save</button>
                </div>
            </div>
        </div>
    </div>

and the following CCS override



    #CCNewModal .modal-body {
        max-height: 420px;
        overflow-y: auto;
    }



Master page is basically - the page I am working on fits into the MainContent placeholder

    <form runat="server" class="form-horizontal">

    <div class="container body-content">
             
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <asp:Label ID="FooterLabel" runat="server" Font-Size="Small"></asp:Label>
            </footer>
        </div>

    </form>

This is what the form looks like using form-vertical

![screenshot one][1]


..and it really does a number with the modal formatting

![screenshot two][2]

.. using form-horizontal (wide and narrow)

![screenshot three][3]

![screenshot four][4]

![screenshot five][5]


![screenshot six][6]


  [1]: http://i.stack.imgur.com/a8oof.jpg
  [2]: http://i.stack.imgur.com/yjFBr.jpg
  [3]: http://i.stack.imgur.com/mqzBJ.jpg
  [4]: http://i.stack.imgur.com/vnpM4.jpg
  [5]: http://i.stack.imgur.com/QVczU.jpg
  [6]: http://i.stack.imgur.com/YdkzF.jpg

Twitter Bootstrap - form in Modal formatting - ASP.NET

Everything starts working again if you click *off* of the Modal.  But if you use the button it's not working.  When the modal opens it adds a `.modal-backdrop` to the page to catch clicks away from the modal.  

![Div](http://i.imgur.com/MXHUFhV.png)

Here's my theory on why the click isn't working.  Here's the source code for the page.  

    
    <div id="contactModal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                
            </div>
        </div>
    </div> 

Since the modal content is loaded dynamically, the automatic handlers that bootstrap provides that wire up events when the page loads, don't catch the data attributes that arrive after the fact.

The following code should automatically close the modal and all the attached components:

    <button type="button" class="close" data-dismiss="modal">
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
    </button>

When bootstrap.js loads, it looks for `[data-dismiss=modal]` elements and wires up listeners accordingly. Since the element won't be there on startup, we'll have to add a listener that won't go anywhere and then find the element through delegation.

Listen for clicks anywhere on the body and then only care about those that have data-dismiss attributes.  Then find the closest `.modal` parent of element that fired the event and then close that:

    $(document).on('click', "[data-dismiss=modal]", function() {
        $(this).closest('.modal').modal('hide')
    });

Here's a working example.  I've broken the close button data attribute in order to test if we can appropriately handle it by ourselves.  Bootstrap won't pick it up, but the code will.





    $(document).on('click', "[data-dismissTEST=modal]", function() {
        $(this).closest('.modal').modal('hide')
    });



    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.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-dismissTEST="modal">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

I have a bootstrap based site where both the modal and the dropdown menus are done with bootstrap:

http://newsite.mckeehomesnc.com/

If you click on "Questions?" button it brings up a modal. If you close the modal using the x in the right corner no issue.

If you close the modal by clicking outside the modal area, it closes but then the drop down menus on the underlying page no longer work.

Any ideas? I think it has to do with an overly broad stopping of propagation in Bootstrap itself but not sure.

