BootStrap 模态代码无效

Question

我的问题是单击按钮时没有出现模式。

主要div直接复制自 http://getbootstrap.com/javascript/#modals

我已经检查过我在 head 中的脚本链接是正确的。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
          <link rel="stylesheet" href="css/bootstrap.css" />
         <link rel="stylesheet" href="css/animate.css" />
        <script src="css-sheets/bootstrap.js"></script>
        <script src="js/ChartNew.js"></script>

    </head>
    <body>
        <form id="form1" runat="server">
       <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <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-label="Close"><span aria-hidden="true">&times;</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-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
        </form>
    </body>
    </html>

Answer 1

Bootstrap 要求 jQuery 用于 Bootstrap jQuery 插件，如模态框。

您需要在 bootstrap.js 之前添加 jQuery 脚本标签，如下所示

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
          <link rel="stylesheet" href="Content/bootstrap.css" />
         <link rel="stylesheet" href="Content/animate.css" />
         <script src="Scripts/jquery-1.9.1.min.js"></script>
        <script src="Scripts/bootstrap.js"></script>
        <script src="js/ChartNew.js"></script>

    </head>
    <body>
        <form id="form1" runat="server">
       <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <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-label="Close"><span aria-hidden="true">&times;</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-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
        </form>
    </body>
    </html>

您将在下方link获得jQuery下载 http://jquery.com/

在您的代码中使用时，将文件夹名称替换为您的特定文件夹。

在 Chrome 版本 39.0.2171.99 m 中测试，完美运行

希望这能解决您的问题。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

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

<head runat="server">
  <title></title>

</head>

<body>
  <form id="form1" runat="server">
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <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-label="Close"><span aria-hidden="true">&times;</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-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</body>

BootStrap 模态代码无效

BootStrap Modal Code not working

gridview

modal-dialog

twitter-bootstrap

bootstrap-modal