如何在引导模式窗口中显示 Flash 消息？

Question

Here is the problem. I have a bootstrap modal window with forms where i show up error messages with flask.flash() if any happend. But! When I click upload for the first time my modal window is closing, and I can see the error message only when I reopen the modal window. So the error message should show up when I click Upload button without closing the modal window, if the error happend, but if there is no errors, it should work as it is. How to make it behave the way I want? Is it js stuff? (which I don't know) Or it could be made by flask and bootstrap? Anyway, need your help guys.

<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>

Answer 1

Yeah, I was stuck with this too. There is a easy solution with JQuery: This code basically opens up the modal only if the error (flash warning exist)

where .flash is the div that you named for your flash warning and

changePasswordModal is the modal 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>