CODEWITHSUNDEEP
twitter-bootstrapmodal-dialog
MaxNikitin
MaxNikitin

Reputation: 33

bootstrap modal error - only black area without window

Screenshot - http://screencast.com/t/DxdVjiC7idUl

<div id="edit_form" class="modal fade" 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">Редактирование объекта</h3>
    </div>
    <div class="modal-body" id="fm_edit_obj">
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Отменить</button>
      <button class="btn btn-primary">Сохранить изменения</button>
    </div>
  </div>

On click in image - 

$('#edit_form').modal({'show' : true});

Why can't I see windows, only background?

Upvotes: 3

Views: 8103

Answers (1)

Ryan
Ryan

Reputation: 6239

Using the bootstrap docs as a guide, assuming you use bootstrap v3, you were missing "modal-dialog" and "modal-content" divs. Here, i changed and tested with your code:

  <div id="edit_form" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
              <h3 id="myModalLabel">Редактирование объекта</h3>
            </div>
            <div class="modal-body" id="fm_edit_obj">
            BODY
            </div>
            <div class="modal-footer">
              <button class="btn" data-dismiss="modal" aria-hidden="true">Отменить</button>
              <button class="btn btn-primary">Сохранить изменения</button>
            </div>  
        </div>
    </div>
  </div>
  <img src="/img/knot.jpg" alt="" id="myimg">

<script>
$('#myimg').click(function(){
    $('#edit_form').modal('show');
});
</script>

Upvotes: 2

Related Questions