Question

我可以在本地运行我的代码。一切似乎都是完美的。但是，一旦我将存储库上传到Git-Hub并尝试在Git-hub页面上运行它，部分网站就会中断吗？具体来说，唯一的问题是当我在导航栏上单击“添加到库”时应该运行的模式。

我尝试将其从Git-Hub中删除，然后重新上传。我尝试过移动文件，但似乎没有任何效果。我真的不确定问题的根源是（？）

<!-- Button trigger modal -->
            <button
              type="button"
              class="btn btn-secondary"
              data-toggle="modal"
              data-target="#libraryModal"
            >
              Add to Library
            </button>

<!-- Modal -->
    <div
      class="modal"
      id="libraryModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="libraryModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title text-primary" id="libraryModalLabel">
              Add to Library
            </h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <input
                  type="text"
                  class="form-control mb-2"
                  id="englishField"
                  placeholder="English"
                />
                <input
                  type="text"
                  class="form-control"
                  id="spanishField"
                  placeholder="Spanish"
                />
              </div>
            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="addWord">
              Add Word
            </button>
            <button type="button" class="btn btn-primary" id="addPhrase">
              Add Phrase
            </button>
          </div>
        </div>
      </div>
    </div>

预期：它将打开一个带有两个文本框和两个按钮的模式。实际：https://at-lowdesu.github.io/EstudiarEspanol/#study-inner（它没有打开。）

Git-Hub链接：https://github.com/At-LowDeSu/EstudiarEspanol

Answer 1

您有混合内容错误。所有src都应链接到https：// ..，但是您有一个使用http：//

<script
      src="http://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>

将http://code.jquery.com/jquery-3.4.1.min.js替换为https://code.jquery.com/jquery-3.4.1.min.js

Answer 2

未在页面中加载或阻止jQuery。控制台说Blocked loading mixed active content “http://code.jquery.com/jquery-3.4.1.min.js” 您应该先解决此问题，因为引导程序使用jQuery来运行。

我尝试将jQuery手动注入到页面中，并且效果很好。

Answer 3

我能够通过更改jQuery脚本调用来修复它。

<script
      src="//code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>

Answer 4

Bootstrap Modal：

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

您可以参考模态的更多示例。

我的引导程序模式在本地运行时有效，但是通过git-hub运行时无法打开？

4 个答案:

Bootstrap Modal：