【问题标题】：How to show flash messages in bootstrap modal window?如何在引导模式窗口中显示 Flash 消息？
【发布时间】：2019-01-17 06:55:22
【问题描述】：

这就是问题所在。我有一个带有表单的引导模式窗口，如果发生任何情况，我会在其中显示带有 flask.flash() 的错误消息。但！当我第一次单击上传时，我的模态窗口正在关闭，并且只有在我重新打开模态窗口时才能看到错误消息。因此，当我单击Upload 按钮而不关闭模式窗口时，应该会显示错误消息，如果发生错误，但如果没有错误，它应该可以正常工作。如何让它按照我想要的方式运行？是js的东西吗？（我不知道）或者它可以由烧瓶和引导程序制成？无论如何，需要你们的帮助。

<form method="post" action="{{ url_for('index') }}" enctype="multipart/form-data">
                <div class="modal-body">
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                               {{ message }}
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    <div class="input-group mb-3">
                      <div class="custom-file">
                        <input type=file name=dump_file class="file-input" id="custom-file-input" multiple>
                        <label class="custom-file-label" for="custom-file-input" data-browse="Browse">Choose file</label>
                      </div>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="customRadioInline1" name="radio" class="custom-control-input" value="linux">
                      <label class="custom-control-label" for="customRadioInline1">Linux</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="customRadioInline2" name="radio" class="custom-control-input" value="windows">
                      <label class="custom-control-label" for="customRadioInline2">Windows</label>
                    </div>
                    <!-- <span class="glyphicon glyphicon-paperclip"></span> -->
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-info">Upload</button>
                </div>
          </form>
      </div>
    </div>
  </div>

【问题讨论】：

标签： javascript flask bootstrap-4

【解决方案1】：

是的，我也被这个困住了。 JQuery 有一个简单的解决方案：此代码基本上仅在错误（存在闪烁警告）时才打开模态

其中 .flash 是您为闪光警告命名的 div，并且

changePasswordModal 是模态ID

<script>
    $(document).ready(function() { // When page finished loading
  if ( $('.flash').length ) { // if there is an DOM that has class has-error
     $('#changePasswordModal').modal('show'); // Show Modal
  }
});
</script>

【讨论】：