Home / Questions / 15987
Accepted
Ricardo A
Asked: 2020-07-06 19:22:11 +0800 CST 2020-07-06 19:22:11 +0800 CST

为什么我的 Bootstrap 模式没有隐藏？

  • 772

我用 Bootstrap 制作了一个模态，一切都完全符合我的要求，唯一的问题是它出现在应该使模态出现的按钮的正下方，为什么会发生这种情况？我该如何解决？在这里，我留下我的代码和正在发生的事情的图像。

<p>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nombralo">Nombra esta foto</button>
        <div class="modal-fade" tabindex="-1" role="dialog" id="nombralo">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Dale nombre a esta foto</h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="message-text" class="control-label">Nombra la foto:</label>
                    <input type="text" class="form-control" id="message-text">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Aceptar</button>
              </div>
            </div>
          </div>
        </div>
        <h1></h1>

    </p>

在此处输入图像描述

javascript

3 Answers

  1. Best Answer

    模态看起来像这样，因为您已声明模态错误。
    我解释：

    • 您有一个错误指定的模态类modal-fade，使模态可见，就好像它是“静态” div 而不是“不可见”。
    • 将您提到的上述类更改为modal fadey 不应再显示在按钮下方。

    我希望这可以解决您的问题：D

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

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nombralo">Nombra esta foto</button>
        <div class="modal fade" tabindex="-1" role="dialog" id="nombralo">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Dale nombre a esta foto</h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="message-text" class="control-label">Nombra la foto:</label>
                    <input type="text" class="form-control" id="message-text">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Aceptar</button>
              </div>
            </div>
          </div>
        </div>

    • 2 

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

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nombralo">Nombra esta foto</button>
        <div class="modal fade" tabindex="-1" role="dialog" id="nombralo">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Dale nombre a esta foto</h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="message-text" class="control-label">Nombra la foto:</label>
                    <input type="text" class="form-control" id="message-text">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Aceptar</button>
              </div>
            </div>
          </div>
        </div>

    • 0

  3. 问题是，如果您单击“确定”按钮，它不会退出模式

    • -1