Modal not triggering in Safari 9 or IE all versions.

Topic: Modal not triggering in Safari 9 or IE all versions.

ashelighmorehattia pro asked 6 years ago

The modal works perfectly in all browsers except for Safari 9 and IE 9, 10 and 11. I've searched the forums and all over the internet for a solution.

Is there some special code that MDBootstrap used on the website to make it work in the above mentioned browsers?

Jakub Strebeyko staff commented 6 years ago

Hi there ashelighmorehattia, Thanks for reaching out. As for modals, MDB uses JS provided alongside with Bootstrap. Are you getting any errors in the IE Developer Tools console? With Best Regards, Kuba

Add comment

Thomas Emmanuel free answered 6 years ago

0 0 Best answer

<p>Hello,</p>
<p>Facing same issues, the model is not working on IE11 but works perfect on IE Edge.</p>
<p><--</p>
<p><button target="_blank" class="btn btn-md mbbbuttonyellow waves-effect waves-light" data-toggle="modal" data-target="#loginmodal">Sign In</button></p>
<p><div class="modal fade mbbmodal" id="loginmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><br />
<div class="modal-dialog modal-notify" role="document"><br />
<div class="modal-content"></p>
<p><div class="modal-body"><br />
<div class="text-center"><br />
<a href="/CA/"><img src="assets/images/logo.png" class="img-fluid flex-center" width="100px"></a><br />
<hr><br />
<form:form action="loadBaseData" modelAttribute="user" id="loginPage" name="loginPage" method="POST" ><br />
<fieldset><br />
<div class="form-group"><br />
<input class="form-control mbbinputlg" placeholder="Username" id="userId" name="userId" type="text" ><br />
</div><br />
<div class="form-group"><br />
<input class="form-control mbbinputlg" placeholder="Password" name="password" type="password" value=""><br />
</div><br />
<div class="text-center"><br />
<button class="btn btn-md btn btn-sm mbbbuttonyellow" type="submit">Login</button><br />
</div></p>
<p></fieldset><br />
</form:form><br />
</div><br />
</div></p>
<p></div><br />
</div><br />
</div></p>
<p>--></p>
<p>this the console error i got on ie11</p>
<p><--</p>
<p>SCRIPT1002: Syntax error</p>
<p>popper.min.js (1,175)</p>
<p>SCRIPT5009: 'Popper' is undefined</p>
<p>bootstrap.min.js (6,1)</p>
<p>--></p>
<p>Thanks</p>

Please insert min. 20 characters.

Hello,

Facing same issues, the model is not working on IE11 but works perfect on IE Edge.

<--

<div class="modal-body">
<div class="text-center">
<a href="/CA/"><img src="assets/images/logo.png" class="img-fluid flex-center" width="100px"></a>
<hr>
<form:form action="loadBaseData" modelAttribute="user" id="loginPage" name="loginPage" method="POST" >
<fieldset>
<div class="form-group">
<input class="form-control mbbinputlg" placeholder="Username" id="userId" name="userId" type="text" >
</div>
<div class="form-group">
<input class="form-control mbbinputlg" placeholder="Password" name="password" type="password" value="">
</div>
<div class="text-center">
<button class="btn btn-md btn btn-sm mbbbuttonyellow" type="submit">Login</button>
</div>

</fieldset>
</form:form>
</div>
</div>

</div>
</div>
</div>

-->

this the console error i got on ie11

<--

SCRIPT1002: Syntax error

popper.min.js (1,175)

SCRIPT5009: 'Popper' is undefined

bootstrap.min.js (6,1)

-->

Thanks

Jakub Strebeyko staff commented 6 years ago

Hi Thomas, The error message seems rather enigmatic, while the problem may have multiple roots. Are you compiling your code with webpack? Note that Bootstrap's Popper.js has known compatibility issues on IE. With Regards, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ashelighmorehattia

Pro User 14Support score
1Questions 1Answers 0Snippets