使用jQuery打开模态Bootstrap：脚本未打开模态

6uxekuva  于 2023-03-01  发布在  jQuery
关注(0)|答案(1)|浏览(152)

我创建了两个按钮和两个模态：预订一个露营地（id="reserveButton"应该打开id="reserveModal"）和登录（id="loginButton"应该打开id="loginModal"），并在脚本文件中的函数打开它。但它不工作。请帮助我了解为什么它不工作。我想可能JS脚本是不正确的，但我想我错过了HTML文件中的东西。

<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- build:css css/main.css -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />
    <link rel="stylesheet" href="/css/styles.css" />
    <!-- endbuild -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans" />

    <title>NuCamp: A Better Way To Camp</title>

</head>

<body>
    <header class="jumbotron jumbotron-fluid">
        <div class="container">
            <div class="row">
                <div class="col-4 col-sm-3 col-md-2 align-self-center">
                    <img src="img/logo.png" class="img-fluid" />
                </div>
                <div class="col">
                    <h1>NuCamp</h1>
                    <h2> a better way to camp</h2>
                </div>
                <div class="col col-md-4 col-xl-2 align-self-right ">
                    <a role="button" class="btn-info btn btn-lg" id="reserveButton"
                        title="Or call us at <br /><strong>1-206-555-1234</strong>">Reserve Campsite</a>
                </div>
            </div>
        </div>
    </header>

    <div id="reserveModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Reserve a Campsite</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <form id="reserveForm">
                            <div class="form-group row">
                                <div class="col-12 col-sm-8 float-right">
                                    <label for="numCampers">Number of Campers</label>
                                    <div class="col-sm-6">
                                        <select class="col" id="numCampers">
                                            <option value="">Select...</option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-12 col-sm-8 mb-4 float-right">
                                        <label for="DateChampers" class="col-form-label col-sm-6">Date</label>

                                        <input type="text" class="form-control" id="date" placeholder="mm/dd/yyyy">
                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="CampsiteType" class="col-form-label col-sm-6">Campsite Type</label>
                                    <div class="col-2 btn-group btn-group-toggle" data-toggle="buttons">
                                        <label class=" active btn btn-success">
                                            <input type="radio" name="siteType" id="option1" autocomplete="off">Tent
                                        </label>
                                        <label class="active btn btn-primary">
                                            <input type="radio" name="siteType" id="option2" autocomplete="off">RV
                                        </label>

                                    </div>
                                </div>

                                <div class="form-group">

                                    <button type="Search" class="btn btn-primary ">Search</button>

                                    <button type="Cancel" class="btn btn btn-secondary "
                                        data-dismiss="modal">Cancel</button>

                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <nav class="navbar navbar-expand-sm navbar-dark sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="30" /></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nucampNavbar">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nucampNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="nucampNavbar">
                    <ul class="navbar-nav">
                        <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="aboutus.html">About</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Sites</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                    </ul>
                    <span class="navbar-text ml-auto">
                        <a role="button" id="loginButton">
                            <i class="fa fa-sign-in"></i> Login
                        </a>
                    </span>
                </div>
        </div>
    </nav>
    <!--Login Modal-->
    <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Login</h3>
                    <button type="button" class="close" id="loginModal"></button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <form>
                            <div class="form-row">
                                <div class="form-group col-12">
                                    <label class="sr-only" for="loginEmail">Email address</label>
                                    <input type="email" class="form-control form-control-sm" id="loginEmail"
                                        placeholder="Enter email">
                                </div>
                                <div class="form-group col-12">
                                    <label class="sr-only" for="loginPassword">Password</label>
                                    <input type="password" class="form-control form-control-sm" id="loginPassword"
                                        placeholder="Password">
                                </div>
                                <div class="col">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox">
                                        <label class="form-check-label"> Remember me</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <button type="button" class="btn btn-secondary btn-sm ml-auto"
                                    data-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row row-content">
            <div class="col-md-8 mx-auto">
                <div id="homeCarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#homeCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#homeCarousel" data-slide-to="1"></li>
                        <li data-target="#homeCarousel" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="img/breadcrumb-trail.jpg"
                                alt="Breadcrumb Trail Campground" />
                            <div class="carousel-caption">
                                <h3>Breadcrumb Trail Campground</h3>
                                <p class="d-none d-sm-block">Let Nucamp be your guide to this off-the-beaten-path,
                                    hike-in-only campground.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="img/react-lake.jpg" alt="React Lake Campground" />
                            <div class="carousel-caption">
                                <h3>React Lake Campground</h3>
                                <p class="d-none d-sm-block">Nestled in the foothills of the Chrome Mountains, this
                                    campgroundon the shores of pristine React Lake is a favorite for fly fishes.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="img/chrome-river.jpg" alt="Chrome River Campground" />
                            <div class="carousel-caption">
                                <h3>Chrome River Campground</h3>
                                <p class="d-none d-sm-block">Spend a few sunny days and starry nights beneath a canopy
                                    of old-growth firs at this enchanting spot by the Chrome River.</p>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#homeCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#homeCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                        <span class="sr-only">Next</span>
                    </a>

                    <button class="btn btn-danger btn-sm" id="carouselButton">
                        <i class="fa fa-pause"></i>
                    </button>

                </div>
            </div>
        </div>

        <div class="container">
            <div class="row row-content align-items-center">
                <div class="col-sm-4 order-sm-last col-md-3">
                    <h2 class="text-sm-right">Discover & Review</h2>
                </div>
                <div class="col">
                    <div class="media">
                        <img class="d-flex mr-3 img-thumbnail" src="img/breadcrumb-trail-thumb.jpg"
                            alt="Breadcrump Trail thumbnal" />
                        <div class="media-body align-self-center">
                            <h3>Our Campsites</h3>
                            <p class="d-none d-sm-block">Explore our growing database of curated campsites and leave
                                your own reviews!</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row row-content align-items-center">
                <div class="col-sm-4 order-sm-last col-md-3">
                    <h2>Featured Campsites</h2>
                </div>
                <div class="col">
                    <div class="media">
                        <img class="d-flex mr-3 img-thumbnail " src="img/react-lake-thumb.jpg"
                            class="rounded float-left" alt="Breadcrump Trail thumbnal" />
                        <div class="media-body align-self-center">
                            <h3>React Lake Campground</h3>
                            <p class="d-none d-sm-block"> Nestled in the foothills of the Chrome Mountains, this
                                campground on the shores of the pristine React Lake is a favorite for fly fishers.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-4 order-sm-last col-md-3">
                    <h2 class="text-sm-right">Our Community Partners</h2>
                </div>
                <div class="col">
                    <div class="media">
                        <img class="d-flex mr-3 img-thumbnail" src="img/bootstrap-thumb.png"
                            alt="Bootstrap Outfitters" />
                        <div class="media-body align-self-center">
                            <h3>Bootstrap Outfitters</h3>
                            <p class="d-none d-sm-block"> Bootstrap Outfitters supplies you with the gear you need at
                                prices you can't beat.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <footer class="site-footer">
        <div class="container">
            <div class="row">
                <div class="col-4 col-sm-2">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">Home</a></li>
                        <li><a href="aboutus.html">About</a></li>
                        <li><a href="#">Sites</a></li>
                        <li><a href="contactus.html">Contact</a></li>
                    </ul>
                </div>
                <div class="col-6 col-sm-5 text-center">
                    <h5>Social</h5>
                    <a class="btn btn-social-icon btn-instagram" href="http://instagram.com/"><i
                            class="fa fa-instagram"></i></a>
                    <a class="btn btn-social-icon btn-facebook" href="http://facebook.com/"><i
                            class="fa fa-facebook"></i></a>
                    <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i
                            class="fa fa-twitter"></i></a>
                    <a class="btn btn-social-icon btn-google" href="http://youtube.com/"><i
                            class="fa fa-youtube"></i></a>
                </div>
                <div class="col-sm-4 text-center">
                    <a role="button" class="btn btn-link" href="tel:+12065551234"><i class="fa fa-phone"></i>
                        1-206-555-1234</a><br />
                    <a role="button" class="btn btn-link" href="mailto:campsites@nucamp.co"><i
                            class="fa fa-envelope-o"></i> campsites@nucamp.co</a>
                </div>
            </div>
        </div>
        </div>
    </footer>

    <!-- build:js js/main.js -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
    <!-- endbuild -->

</body>

</html>

脚本.js

$(function () {
    $(".carousel").carousel({ interval: 2000 });
    $("#carouselButton").on('click', function () {
        if ($("#carouselButton").children("i").hasClass("fa-pause")) {
            $(".carousel").carousel("pause");
            $("#carouselButton").children("i").removeClass("fa-pause");
            $("#carouselButton").children("i").addClass("fa-play");
        } else {
            $(".carousel").carousel("cycle");
            $("#carouselButton").children("i").removeClass("fa-play");
            $("#carouselButton").children("i").addClass("fa-pause");
        }
    });
});

$(function () {
    $('#reserveButton').on('click', function () {
        $('#reserveModal').show();
    });


    $('#loginButton').on('click', function () {
        $('#loginModal').show();
    });
});
jquery

1条答案

按热度按时间
6l7fqoea

6l7fqoea1#

有几个问题：
1.您有两个ID为loginModal的元素。HTML ID必须唯一。请更改具有该ID的按钮以使用其他ID。

  1. Bootstrap 5文档展示了如何在v5中打开modals。在调用.show()之前，您需要对其进行初始化：
// First instantiate your modal
const myModal = new bootstrap.Modal('#myModal', {
    keyboard: false
});

// Now show it
myModal.show();

工作片段如下。
注意-请花点时间来解决问题-你问题中90%的HTML和JS与问题无关，只是需要额外的时间来筛选它，试图找到实际的问题。如果你在发布问题之前这样做，你会让其他人更容易和更快地提供帮助。
x一个一个一个一个x一个一个二个x

赞(0）分享  回复(0）举报  2023-03-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com