Bootstrap 3.0模态窗口不起作用，

时间：2013-11-29 14:11:52

标签： jquery html asp.net-mvc-4 twitter-bootstrap twitter-bootstrap-3

以下是mvc项目在索引页面上生成的html，似乎是我的模态形式的问题，create是局部视图，但窗口不起作用。

Javascript加载的顺序是否有问题？

我拿了bootwatch css的bootswatch css。我甚至将bootswatch css复制到原始的bootstrap css，这也没有什么区别。

我在web.config中也有一个部分。

   <httpProtocol>
      <customHeaders>
        <clear/>
        <add name="X-UA-Compatible" value="IE=edge"/>
      </customHeaders>
    </httpProtocol>

它没有成功。

bootstrap http://getbootstrap.com/javascript/#modals建议使用Edge， 如果我删除它IE9默认设置尖叫。得到很多javascript错误。所以我不能带走边缘设置。

当我关闭网站的兼容性时，它可以正常工作，但仍然没有弹出。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Test Application 6</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="/Content/IE9FixScripts"></script>

    <![endif]-->
    <script src="/Scripts/jquery-2.0.3.js"></script>

</head>
<body>
    <div id="wrap">
        <div class="container">
            <!-- Navbar
      ================================================== -->
            <div class="navbar navbar-default navbar-fixed-top">
                <!--<div class="logosmall pull-left"></div> -->
                <div class="container">

                    <div class="navbar-header">

                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <a class="navbar-brand" href="/"><i class="fa fa-home fa-lg"></i></a>

                    </div>
                    <div class="navbar-collapse collapse navbar-responsive-collapse">
                        <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog fa-lg"></i> Admin<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="/User"><i class="fa fa-user"></i> Users</a></li>
                                    <li><a href="/Role"><i class="fa fa-group"></i> Roles</a></li>
                                </ul>
                            </li>
                        </ul>

                        <ul class="nav navbar-nav navbar-right">
                            <li class="navbar-text">Paracetemol\Adamstritator</li>
                        </ul>
                    </div>
                    <!-- /.nav-collapse -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.navbar -->

            <!-- Main content  any sections which need to be filld in and then body -->
            <div class="container">

                    <div>


    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>Loading…</p>
    </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>

 <p class="pull-right">
    <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">Create <i class="fa fa-user fa-lg"></i>
    </a>
</p>
<script>
        $(function () {
            $(".modal-link").click(function (event) {
                event.preventDefault();
                $('#myModal').removeData("modal");
                $('#myModal').modal({ remote: $(this).attr("href") });
            });
        })
    </script>



            </div>

        </div>
    </div>


    <script type="text/javascript">
        $(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) >= 0) {
                    $(this).parent().addClass('active');
                }
            });
        });
    </script>

    <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/Scripts/bootstrap.js"></script>


</body>
</html>

网络标签中没有注意到任何404.

谢谢zessx非常好解释。

尝试下面的代码提到在div的

中搞砸了

现在弹出窗口出现并且看起来并不像预期的那样好。 enter image description here

create.cshtml如下所示。

@model BAMLC.TDR.UI.Models.TdrCreateUserViewModel

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Edit group member</h3>
</div>
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <div class="modal-body">
    <fieldset>
        <legend>CreateUserViewModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.IsLockedOut)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.IsLockedOut)
            @Html.ValidationMessageFor(model => model.IsLockedOut)
        </div>
    </fieldset>
        </div>
<div class="modal-footer">
        <button class="btn btn-inverse" type="submit">Save</button>
    </div>

}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

非常感谢你。

1 个答案:

答案 0 :(得分：2)

您没有关注Bootstrap Modal static example。改变这个：

  • 从.hide
    • 中删除#myModal课程
  • 将.modal-header，.modal-body，.modal-footer包裹到.modal-content
  • 将.modal-content换入.modal-dialog

以下是您应该使用的最终代码：

$(function () {
    $(".modal-link").click(function (event) {
        event.preventDefault();
        $('#myModal').removeData("modal");
        $('#myModal').modal({ remote: $(this).attr("href") });
    });
});
$(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) >= 0) {
            $(this).parent().addClass('active');
        }
    });
});
.container {
    padding-top: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div id="wrap">
  <!-- Navbar
================================================== -->
  <div class="navbar navbar-default navbar-fixed-top">
    <!--<div class="logosmall pull-left"></div> -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="/"><i class="fa fa-home fa-lg"></i></a>

    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog fa-lg"></i> Admin<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/User"><i class="fa fa-user"></i> Users</a></li>
            <li><a href="/Role"><i class="fa fa-group"></i> Roles</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Paracetemol\Adamstritator</li>
      </ul>
    </div>
    <!-- /.nav-collapse -->
  </div>
  <!-- /.navbar -->

  <!-- Main content  any sections which need to be filld in and then body -->
  <div class="container">

    <div>


      <div id="myModal" class="modal fade" 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">×</button>
              <h3 id="myModalLabel">Modal header</h3>
            </div>
            <div class="modal-body">
              <p>Loading…</p>
            </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>
      </div>

    </div>

    <p class="pull-right">
      <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">Create <i class="fa fa-user fa-lg"></i>
      </a>
    </p>
  </div>

</div>

相关问题
最新问题