Databases
StackOverflow2013
Postsdbo
POBootstrap 3.0 Model Window not working,
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap 3.0 Model Window not working,
    text
    copied!<p>The following is the html produced by the mvc project, on index page, Seems to be an issue with my modal form the create is a partial view but the window is not working. </p> <p>is there some thing wrong with the order of the Javascript loading?</p> <p>i took bootswatch css insted of bootstrap css. i even replced the bootswatch css to original bootstrap css that did not make a difference also.</p> <p>i also have a section in web.config.</p> <pre><code> &lt;httpProtocol&gt; &lt;customHeaders&gt; &lt;clear/&gt; &lt;add name="X-UA-Compatible" value="IE=edge"/&gt; &lt;/customHeaders&gt; &lt;/httpProtocol&gt; </code></pre> <p>it's not working out.</p> <p>the bootstrap <a href="http://getbootstrap.com/javascript/#modals" rel="nofollow noreferrer">http://getbootstrap.com/javascript/#modals</a> recommends to use Edge, If i remove it IE9 default settings scream. get lot of javascript errors. so i cannot take away Edge setting.</p> <p>when i turn the compatibility off for the site then it works fine, <strong>but still no popup</strong>.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;My Test Application 6&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta charset="utf-8"&gt; &lt;link href="/Content/bootstrap.css" rel="stylesheet"/&gt; &lt;link href="/Content/bootstrap-responsive.css" rel="stylesheet"/&gt; &lt;link href="/Content/font-awesome.css" rel="stylesheet"/&gt; &lt;link href="/Content/site.css" rel="stylesheet"/&gt; &lt;script src="/Scripts/modernizr-2.6.2.js"&gt;&lt;/script&gt; &lt;!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --&gt; &lt;!--[if lt IE 9]&gt; &lt;script src="/Content/IE9FixScripts"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;script src="/Scripts/jquery-2.0.3.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrap"&gt; &lt;div class="container"&gt; &lt;!-- Navbar ================================================== --&gt; &lt;div class="navbar navbar-default navbar-fixed-top"&gt; &lt;!--&lt;div class="logosmall pull-left"&gt;&lt;/div&gt; --&gt; &lt;div class="container"&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt; &lt;a class="navbar-brand" href="/"&gt;&lt;i class="fa fa-home fa-lg"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="navbar-collapse collapse navbar-responsive-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;i class="fa fa-cog fa-lg"&gt;&lt;/i&gt; Admin&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="/User"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; Users&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/Role"&gt;&lt;i class="fa fa-group"&gt;&lt;/i&gt; Roles&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul class="nav navbar-nav navbar-right"&gt; &lt;li class="navbar-text"&gt;Paracetemol\Adamstritator&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- /.nav-collapse --&gt; &lt;/div&gt; &lt;!-- /.container --&gt; &lt;/div&gt; &lt;!-- /.navbar --&gt; &lt;!-- Main content any sections which need to be filld in and then body --&gt; &lt;div class="container"&gt; &lt;div&gt; &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;p&gt;Loading…&lt;/p&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt; &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class="pull-right"&gt; &lt;a class="btn btn-default btn-sm modal-link" title="" href="/User/Create" data-original-title="Create New User" data-toggle="modal" data-target="#myModal" data-placement="left"&gt;Create &lt;i class="fa fa-user fa-lg"&gt;&lt;/i&gt; &lt;/a&gt; &lt;/p&gt; &lt;script&gt; $(function () { $(".modal-link").click(function (event) { event.preventDefault(); $('#myModal').removeData("modal"); $('#myModal').modal({ remote: $(this).attr("href") }); }); }) &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); }); $(document).ready(function () { var url = window.location.pathname; var substr = url.split('/'); var urlaspx = substr[substr.length - 1]; $('.nav').find('.active').removeClass('active'); $('.nav li a').each(function () { if (this.href.indexOf(urlaspx) &gt;= 0) { $(this).parent().addClass('active'); } }); }); &lt;/script&gt; &lt;script src="/Scripts/jquery.validate.js"&gt;&lt;/script&gt; &lt;script src="/Scripts/jquery.validate.unobtrusive.js"&gt;&lt;/script&gt; &lt;script src="/Scripts/bootstrap.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Did not notice any 404's in the network tab either.</p> <p><strong>Thank you zessx very nicely explained.</strong></p> <p>Try'd the below code mentioned wraping things up in div's </p> <p>now the popup comes and is not looking good as its expected. <img src="https://i.stack.imgur.com/eBlHP.png" alt="enter image description here"></p> <p>create.cshtml looks like below.</p> <pre><code>@model BAMLC.TDR.UI.Models.TdrCreateUserViewModel &lt;script src="~/Scripts/jquery-1.8.2.min.js"&gt;&lt;/script&gt; &lt;script src="~/Scripts/jquery.validate.min.js"&gt;&lt;/script&gt; &lt;script src="~/Scripts/jquery.validate.unobtrusive.min.js"&gt;&lt;/script&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; &lt;h3 id="myModalLabel"&gt;Edit group member&lt;/h3&gt; &lt;/div&gt; @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) &lt;div class="modal-body"&gt; &lt;fieldset&gt; &lt;legend&gt;CreateUserViewModel&lt;/legend&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.Email) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.Email) @Html.ValidationMessageFor(model =&gt; model.Email) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.FirstName) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.FirstName) @Html.ValidationMessageFor(model =&gt; model.FirstName) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.LastName) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.LastName) @Html.ValidationMessageFor(model =&gt; model.LastName) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.IsLockedOut) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.IsLockedOut) @Html.ValidationMessageFor(model =&gt; model.IsLockedOut) &lt;/div&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn btn-inverse" type="submit"&gt;Save&lt;/button&gt; &lt;/div&gt; } &lt;div&gt; @Html.ActionLink("Back to List", "Index") &lt;/div&gt; </code></pre> <p>Thank you very much in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload