Question

正在寻求帮助，以使我的工作方式正常工作。当我单击按钮时，什么也没有发生。我想我已经加载了所有东西，包括引导文件和jquery。谁能帮我指出我所缺少的吗？不知道除了我已经拥有的东西之外，是否应该做一些简单的JS / Jquery。

我删去了所有内容，减去按钮和模式代码以简化操作。

谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LED Light Signs</title>
    <link rel="stylesheet" href="assets/css/fontawesome/css/fontawesome.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/custom.css">

    <link href="https://fonts.googleapis.com/css?family=Homenaje" rel="stylesheet">


    <!--[if lt IE9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <section id="interestForm">
        <div class="container">
            <div class="row">

                <div class="col-sm-8">
                    <p class="lead"><strong>Interested in your own LED light SIGN?</strong> Hit the button to get the process started!</p>
                </div><!-- col -->

                <div class="col-sm-4">
                    <button class="btn btn-success btn-lg btn-block" date-toggle="modal" data-target="#interestModal">Click here to contact us</button>
                </div><!-- col -->

            </div><!-- row -->
        </div><!-- container -->
    </section>

    <div class="modal fade" id="interestModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" class="close" data-dismiss="modal"><span      aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i>Send Us a Message!</h4>
                </div><!-- modal-header -->

                <div class="modal-body">
                    <p>Please answer the following questions! We will get to you as soon as possible with design information on your new sign!</p>

                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <label for="mail-name" class="sr-only">Your first name</label>
                            <input type="text" class="form-control" id="mail-name" placeholder="Your first name">
                        </div><!-- form-group -->

                        <div class="form-group">
                            <label for="mail-email" class="sr-only">Your email</label>
                            <input type="text" class="form-control" id="mail-email" placeholder="Your email">
                        </div><!-- form-group -->

                        <input type="submit" class="btn btn-danger" value="Send!">

                    </form>

                </div><!-- modal-body -->
            </div><!-- modal-content -->

        </div><!-- modal-dialog -->

    </div><!-- modal -->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/main.js"></script>

</body>

</html>

Answer 1

尝试使用以下代码。您的代码很完美，只是一个很小的错字，您使用了“ date-toggle =” modal“，因此您的代码无法正常工作。请将其更改为：

data-toggle="modal"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="interestForm">
  <div class="container">
    <div class="row">

      <div class="col-sm-8">
        <p class="lead"><strong>Interested in your own LED light SIGN?</strong> Hit the button to get the process started!</p>
      </div>
      <!-- col -->

      <div class="col-sm-4">
        <button class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#interestModal">Click here to contact us</button>
      </div>
      <!-- col -->

    </div>
    <!-- row -->
  </div>
  <!-- container -->
</section>

<div class="modal fade" id="interestModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button class="close" class="close" data-dismiss="modal"><span      aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
        <h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i>Send Us a Message!</h4>
      </div>
      <!-- modal-header -->

      <div class="modal-body">
        <p>Please answer the following questions! We will get to you as soon as possible with design information on your new sign!</p>

        <form class="form-inline" role="form">
          <div class="form-group">
            <label for="mail-name" class="sr-only">Your first name</label>
            <input type="text" class="form-control" id="mail-name" placeholder="Your first name">
          </div>
          <!-- form-group -->

          <div class="form-group">
            <label for="mail-email" class="sr-only">Your email</label>
            <input type="text" class="form-control" id="mail-email" placeholder="Your email">
          </div>
          <!-- form-group -->

          <input type="submit" class="btn btn-danger" value="Send!">

        </form>

      </div>
      <!-- modal-body -->
    </div>
    <!-- modal-content -->

  </div>
  <!-- modal-dialog -->

</div>
<!-- modal -->

Bootstrap 4模态-单击按钮但模态不显示

1 个答案: