CODEWITHSUNDEEP
javascriptjquerycssinternet-explorertwitter-bootstrap
Shonna Edwards Martell
Shonna Edwards Martell

Reputation: 39

Bootstrap Modal Open on Page Load in IE8

So my modal works greats on every other browser, for some reason in IE, when I go to the site... the modal is not automatically hidden. It's already open :/
I did modify the bootstrap css to only have styles needed to make modal work, and it works fine on chrome, safari, ff, ie 9 & 10, just not 8.

Any idea what could be wrong?

<a data-toggle="modal" class="byodbtn" title="byod-whitepaper" href="#myModal">Download White Paper</a>

<div class="modal hide fade workspace-brochure" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">

{sn-english-form-workspace}

  </div>
</div>

Upvotes: 1

Views: 2239

Answers (3)

Kayla Z
Kayla Z

Reputation: 11

css styling issue. Make sure you update to the latest bootstrap is applicable. Best way is to create a new css styling.

$('yourclassorID").on("click", function(){
$('.modal').removeCLass('hide');
})

CSS:

hide{
display:none;
}

When a user first initializes your view make sure to have a class that can be removed example being "hide"

Upvotes: 0

Mudit Verma
Mudit Verma

Reputation: 469

If you are using IE11 it should work properly.

For IE versions =< 10, problem occurs when fade class is used. Try removing it - 

jQuery(document).ready(function($) {
  if ( jQuery.browser.msie && 10 >= jQuery.browser.version ) {
    jQuery('.fade').removeClass('fade');
  }

Upvotes: 1

Saty
Saty

Reputation: 77

Try putting the following in your css:

#myModal {
  display: none;
}

Upvotes: 1

Related Questions