Question

我是MVC5的新手，我从w3schools获取了这段代码，并根据我的需要进行了更改，但是没有在按钮点击时显示模态。请指导我失踪的地方......

我的主视图中的参考

头

<!--Start Bootstrap-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/CustomBootStrap.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<!--End Bootstrap-->
<!--Start Scripts-->
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/CustomJavaScript.js"></script>
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-2.2.1.js"></script>
<script src="~/Scripts/jquery-2.2.1.min.js"></script>
<script src="~/Scripts/_references.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/respond.min.js"></script>
<script src="~/Scripts/respond.js"></script>
<!--End Scripts-->

体

<div class="panel">
<div class="panel-heading div-bgGreen div-textWhite text-center"><span style="font-weight:600;" class="text-center">Recent Activities</span></div>
<div class="panel-body">
    Panel Content
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

    <!-- Modal -->
    <div class="modal fade bootstrap" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>This is a small modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

我已经提供了所有参考资料，但为什么它没有显示模态。当我使用“Pavan Teja”的:-)给出代码时，它对我有用。 Pavan Teja的代码也有这些参考。请让我知道这背后的原因是什么。此致

Answer 1

你必须包含jquery和bootstrap.js以使其正常工作。你提供的标记是正确的。

＆＃13;

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

<!-- Modal -->
<div class="modal fade bootstrap" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>This is a small modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

你有多个jquery和bootstrap.js文件包含在file.you只需要一个refrence.change它到this.and bootstrap.js应该在jquery之后。

<script src="~/Scripts/jquery-2.2.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
<script src="~/Scripts/CustomJavaScript.js"></script>
<script src="~/Scripts/_references.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/respond.min.js"></script>

如何在ASP.NET MVC5中打开模态

1 个答案: