Question

我的问题是单击按钮时模式不会出现。

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

我已经检查过我对头部脚本的链接是否正确。

<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>

您将在下面的链接中获取jQuery以进行下载 http://jquery.com/

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

在Chrome版本39.0.2171.99 m中测试，效果很好

希望这能解决你的问题。

＆＃13;

<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>

＆＃13;

BootStrap模式代码无法正常工作

1 个答案: