简体   繁体   中英

Modal Popup Not Displaying inside Iframe in Internet Explorer

I have created a PHP web application using twitter bootstrap and jquery. This application is inside an iframe on our website here: http://southcommdigital.com/admin/ . When you click on the login link on the top right, a modal pops up with a login form. This works perfectly in Firefox and Chrome, but the modal won't display in Internet Explorer. Additionally, this WILL work in IE if you browse to the iframe page itself here: http://omgsurvey.com/apps/Dan/index.php . Is this a known issue and does anybody know of a workaround for this? Thank you for any help you can give me.

Trigger Link:

<a data-toggle="modal" href="#loginModal">
  <span class="glyphicon glyphicon-log-in"> </span>&nbsp;Login
</a>

Popup code:

<div class="modal fade text-center" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="max-width: 400px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h1 class="modal-title">Login</h1>
      </div>
      <form role="form" name="loginformname" method="post" id="loginformname" class="loginformid" enctype="application/x-www-form-urlencoded" action="form_action.php">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 text-left">
              <div class="form-group">
                <label for="username" class="control-label">Username</label>
                <div>
                  <input type="text" class="form-control" id="username" name="username" placeholder="">
                </div>
              </div>
              <div class="form-group">
                <label for="password" class="control-label">Password</label>
                <div>
                  <input type="password" class="form-control" id="password" name="password" placeholder="">
                </div>
              </div>
              <input name="action" id="action" value="login" type="hidden">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input name="submit" id="submit" value="Login" type="submit" class="btn btn-primary">
        </div>
      </form> 
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->      <!-- END LOGIN MODAL  --> 

根据所使用的版本,您可以在IE(F12)中检出控制台,看来您有一些错误可能需要解决。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM