title: Bootstrap Modal not closing in Safari
body: <p>I have an issue with bootstrap where Modals are not closing upon form submission in Safari but it is fine in Chrome. Note this is a Django project but I don't think that is the issue.</p>
  
  <p>Also I am using using this upload progress bar for the uploads but I am getting the issue both with this and without.</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;VideoOrganiser&lt;/title&gt;
  
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      {% load static %}
  
      &lt;link href="{% static 'mfo/base_style.css' %}" rel="stylesheet" type="text/css"&gt;
      &lt;script src="{% static 'scripts/index.js' %}" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="{% static 'scripts/bootstrap-uploadprogress.js' %}" type="text/javascript"&gt; &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body data-spy="spyscroll"&gt;
  &lt;nav class="navbar navbar-custom"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse"
                      data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="/" style="font-size: 200%"&gt;VideoOrganiser&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li style="padding-top: 11px"&gt;
                      &lt;!-- Trigger the modal with a button --&gt;
                      &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;Upload Media&lt;/button&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
          &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Upload Media&lt;/h4&gt;
        &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form id="upload_form" enctype="multipart/form-data" action="" method="post"&gt;
                  {% csrf_token %}
                  {{ upload_form }}
                  &lt;input type="submit" id="upload_submit" style="margin-top: 10px" class="btn btn-default" value="Upload" /&gt;
              &lt;/form&gt;
              &lt;script&gt;
                  $("#upload_form").uploadprogress({redirect_url: "/"})
              &lt;/script&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="submit" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container-fluid"&gt;
      &lt;div class="jumbotron" id="file_system_jumbo"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the rendered HTML from Safari</p>
  
  <pre><code>&lt;html lang="en"&gt;&lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;VideoOrganiser&lt;/title&gt;
  
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
      &lt;link href="/static/mfo/base_style.css" rel="stylesheet" type="text/css"&gt;
      &lt;script src="/static/scripts/index.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/static/scripts/bootstrap-uploadprogress.js" type="text/javascript"&gt; &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body data-spy="spyscroll"&gt;
  &lt;nav class="navbar navbar-custom"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="/" style="font-size: 200%"&gt;VideoOrganiser&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li style="padding-top: 11px"&gt;
                      &lt;!-- Trigger the modal with a button --&gt;
                      &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;Upload Media&lt;/button&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
          &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Upload Media&lt;/h4&gt;
        &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form id="upload_form" enctype="multipart/form-data" action="" method="post"&gt;
                  &lt;input type="hidden" name="csrfmiddlewaretoken" value="N9n4G7teXfsWt8qXue6S9hOja0I2lLzhe61qPs6OXpZQxX5vYSOVL0LQLDYMuO5a"&gt;
                  &lt;label for="id_uploaded_file"&gt;Uploaded file:&lt;/label&gt;&lt;input id="id_uploaded_file" name="uploaded_file" type="file" required=""&gt;
                  &lt;input type="submit" id="upload_submit" style="margin-top: 10px" class="btn btn-default" value="Upload"&gt;
              &lt;/form&gt;
              &lt;script&gt;
                  $("#upload_form").uploadprogress({redirect_url: "/"})
              &lt;/script&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="submit" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container-fluid"&gt;
      &lt;div class="jumbotron" id="file_system_jumbo"&gt;&lt;p&gt;&lt;span class="glyphicon glyphicon-folder-open"&gt;&lt;/span&gt;/Users/ryanrushton/Movies&lt;/p&gt;&lt;ul class="list-group" id="file_system_list"&gt;&lt;li class="list-group-item"&gt;&lt;p&gt;&lt;a onclick="get_file_system('/Users/ryanrushton/Movies/Movies');"&gt;&lt;span class="glyphicon glyphicon-folder-close"&gt;&lt;/span&gt;Movies&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li class="list-group-item"&gt;&lt;p&gt;&lt;a onclick="get_file_system('/Users/ryanrushton/Movies/TV Shows');"&gt;&lt;span class="glyphicon glyphicon-folder-close"&gt;&lt;/span&gt;TV Shows&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Cheers for the help!</p>
  
  <p>Edit: Removed views.py and added rendered HTML as requested.</p>