bootstrap modal issue in chrome

Question

5.00/5 (1 vote)

See more:

I have a bootstrap modal in my asp.net mvc code that it's body bind in runtime. first time I click on the some button and modal work good (body return from controller by jquery ajax).

then must change model’s body dynamically , it works good too(by jquery Ajax and json). then I close modal. second time I click on some button , modal work but with problem . the problem is scrollbar of modal's body is enable but not working , like that the modal is lock . this problem is in chrome , but in IE I have not that. my code for modal :

success: function (response) {
$('#myModal').html(response);
$('#myModal').modal({ show: true, backdrop: false, keyboard: false });

I change css : overflow:hidden and position:fix but it's not work

Posted 1-Oct-13 19:42pm

newman.h128

Updated 1-Oct-13 19:43pm

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Akinmade Bond · Answer 1 · 2013-10-01T22:31:00

Does your responce contain the entire modal structure?

Cause on this line

<br />
$('#myModal').html(response);<br />

You will be changing the entire modal structure, for example, if your modal structure is

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

When your code runs, and your response is "Query successful" then, your modal structure becomes

HTML

<div class="modal hide fade" id="myModal">
    Query successful
</div>

You should be specific on the part of the DOM you want to change, try
$('#myModal.modal-body').html(response);

Member 10221913 · Answer 2 · 2014-11-17T20:52:00

Solution 2

Great, It worked for me,

$('#myModal.modal-body').html(response);

thanks

Posted 17-Nov-14 20:52pm

Member 10221913