模态框无法打开。Bootstrap

huangapple
go评论60阅读模式
英文:

Modal is not opening. Bootstrap

问题

我是HTML新手，尝试创建一个打开模态框的按钮。我无法找出为什么它不打开。模态框应该包含表单。当我单击时，没有任何反应。

请帮助理解我在哪里出错。

<div id="reserveModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h3 class="modal-title">Reserve a Campsite</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form>
                        <div class="form-group">
                            <div class="col-12 col-sm-10">
                                <label for="numCampers">露营者人数</label>
                                <select class="form-control align-items-right" id="numCampers">
                                    <option value="">选择...</option>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <div class="col col-12 col-sm-10 mb-4">
                                    <label for="DateChampers">日期</label>
                                    <input type="text" class="form-control" id="date" placeholder="mm/dd/yyyy">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col col-12 col-sm-10 mb-4">
                                    <button type="submit" class="btn btn-primary">搜索</button>
                                </div>
                                <div class="col col-12 col-sm-10 mb-4">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

希望这对你有帮助！如果你还有其他问题，请随时提出。

英文:

I am new to HTML and am trying to create a button that opens a model. I cannot find out why it's not opening. Modal has to pop with the form in it. When I click nothing happens.

Please, help to uderstand where I did a mistake.

&lt;div id=&quot;reserveModal&quot; class=&quot;modal fade&quot; role=&quot;dialog&quot;&gt;
&lt;div class=&quot;modal-dialog modal-lg&quot; role=&quot;document&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header bg-info text-white&quot;&gt;
&lt;h3 class=&quot;modal-title&quot;&gt;Reserve a Campsite&lt;/h3&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
&lt;form&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col-12 col-sm-10&quot;&gt;
&lt;label for=&quot;numCampers&quot;&gt;Number of Campers&lt;/label&gt;
&lt;select class=&quot;form-control align-items-right&quot; id=&quot;numCampers&quot;&gt;
&lt;option value=&quot;&quot;&gt;Select...&lt;/option&gt;
&lt;option&gt;1&lt;/option&gt;
&lt;option&gt;2&lt;/option&gt;
&lt;option&gt;3&lt;/option&gt;
&lt;option&gt;4&lt;/option&gt;
&lt;option&gt;5&lt;/option&gt;
&lt;option&gt;6&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col col-12 col-sm-10 mb-4&quot;&gt;
&lt;label for=&quot;DateChampers&quot;&gt;Date&lt;/label&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;date&quot; placeholder=&quot;mm/dd/yyyy&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col col-12 col-sm-10 mb-4&quot;&gt;
&lt;button type=&quot;Search&quot; class=&quot;btn btn-primary &quot;&gt;Search&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;col col-12 col-sm-10 mb-4&quot;&gt;
&lt;button type=&quot;Cancel&quot; class=&quot;btn btn-primary &quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.slim.min.js&quot; integrity=&quot;sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js&quot; integrity=&quot;sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

答案1

得分: 1

你忘记了触发按钮来启动模态窗口。

英文:

You forgot the Trigger button to launch the modal window

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css&quot; integrity=&quot;sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot; /&gt;
&lt;!-- Button trigger modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#reserveModal&quot;&gt;
Launch demo modal
&lt;/button&gt;
&lt;div id=&quot;reserveModal&quot; class=&quot;modal fade&quot; role=&quot;dialog&quot;&gt;
&lt;div class=&quot;modal-dialog modal-lg&quot; role=&quot;document&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header bg-info text-white&quot;&gt;
&lt;h3 class=&quot;modal-title&quot;&gt;Reserve a Campsite&lt;/h3&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
&lt;form&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col-12 col-sm-10&quot;&gt;
&lt;label for=&quot;numCampers&quot;&gt;Number of Campers&lt;/label&gt;
&lt;select class=&quot;form-control align-items-right&quot; id=&quot;numCampers&quot;&gt;
&lt;option value=&quot;&quot;&gt;Select...&lt;/option&gt;
&lt;option&gt;1&lt;/option&gt;
&lt;option&gt;2&lt;/option&gt;
&lt;option&gt;3&lt;/option&gt;
&lt;option&gt;4&lt;/option&gt;
&lt;option&gt;5&lt;/option&gt;
&lt;option&gt;6&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col col-12 col-sm-10 mb-4&quot;&gt;
&lt;label for=&quot;DateChampers&quot;&gt;Date&lt;/label&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;date&quot; placeholder=&quot;mm/dd/yyyy&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col col-12 col-sm-10 mb-4&quot;&gt;
&lt;button type=&quot;Search&quot; class=&quot;btn btn-primary &quot;&gt;Search&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;col col-12 col-sm-10 mb-4&quot;&gt;
&lt;button type=&quot;Cancel&quot; class=&quot;btn btn-primary &quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.slim.min.js&quot; integrity=&quot;sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js&quot; integrity=&quot;sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月19日 10:27:33
  • 转载请务必保留本文链接：https://go.coder-hub.com/75497640.html
  • bootstrap-modal
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定