Question

我正在尝试向我的网站添加模式，但此类部分无效。 Id和数据目标具有相同的名称，而脚本在主体部分的底部分配。究竟有什么不对吗？

以下是代码

    <div class="pricing-btn">
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Click Me</button>
    </div>


    <section id="purchasemodal">
            <div class="modal fade" id="myModal" role="dialog" aria-labelledby="modalHere" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;<span class="sr-only">Close</span></span></button>
                            <h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i>Subscribe to Our Mailing List</h4>
                        </div>
                        <div class="modal-body">
                            <p>Simply enter your name and emil! Appriciate visiting my new Website. New notifications will be sent every time.</p>
                            <form class="form-inline" role="form">
                                <div class="form-group">
                                    <label class="sr-only" for="subscribe-name">Your First Name</label>
                                    <input type="text" class="form-control" id="subscribe-name" placeholder="Your First Name">
                                    <label class="sr-only" for="subscribe-email">Your Email</label>
                                    <input type="text" class="form-control" id="subscribe-email" placeholder="Your Email">

                                </div>
                                <input type="submit" class="btn btn-success" value="Submit">
                            </form>
                            <hr>
                            <p><small>By Providing the email your consent to recive occasinal promotional emails &amp; newsletters.</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>


    <script src="js/jquery.js"></script>

    <!--Bootsrap Javascript-->
    <script src="js/bootstrap/bootstrap.min.js"></script>

    <!--Wow JS-->
    <script src="js/wow/wow.min.js"></script>

    <!--magnific popup JS-->
    <script src="js/magnific-popup/jquery.magnific-popup.min.js"></script>

    <!-- Owl Carosel JS-->
    <script src="js/owl-carousel/owl.carousel.min.js"></script>

    <!--Counter-->
    <script src="js/counter/jquery.waypoints.min.js"></script>
    <script src="js/counter/jquery.counterup.min.js"></script>

    <!--Easingr-->
    <script src="js/easing/jquery.easing.1.3.js"></script>

    <!--JS Script-->
    <script src="js/custom.js"></script>

Answer 1

您需要添加所有必需的js和css文件。

以下是您的工作代码：https://jsfiddle.net/subhrajyoti21/bbps6jzq/

请下载以下文件并将其添加到您的HTML文件中。

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

模态不起作用

1 个答案: