2013-04-01 3 views
0

Я реализовал bootstrap modal и отлично работает. Вот мой кодBootstrap modal overlap

<div id="myModal" class="modal fade hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header" style="background-color:#bb4837"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
     <h2 style="color:white;vertical-align:middle"id="myModalLabel">Add Multiple Stores</h2> 
    </div> 
    <div class="modal-body"> 
     <des style="font-family:garrisons">You can upload a excel sheet with your store details.Please download the multistore template in .xls format <a href="#">here</a>.</des><br><br> 
      <input style="margin-left:5em" type="text" id="upload-textstore" onclick="select_file('store','storefile','store','text/csv');" class="span3"/><button type="button" style="margin-bottom:25px;margin-left:10px" onclick="upload('/merchant/v1/fileupload','store')" class="btn btn-upload">Upload</button><br> 
     <br><br><br><br> 
    </div> 
    <div class="modal-footer"> 
      <form class="form-inline" style="margin-bottom:0px"> 
       <button class="btn btn-danger " data-dismiss="modal" style="font-size:1.2em;height:32px;width:7em;margin-left:4em;margin-right:.5em" href="#">Select</button> 
       <a data-dismiss="modal" href="#" style="font-size:1.2em;margin-top:.4em;margin-left:0px;margin-right:1em">Cancel</a> 

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

Проблема заключается в том, что он перекрывает другие компоненты на веб-странице и выглядит скрытно.

+0

У вас есть ссылка на это, чтобы я мог визуально увидеть его? –

+0

Извините, сайт находится в бета-версии, поэтому я не могу его раскрыть. Проблема в том, что у меня есть карта с перетаскиваемым маркером. но из-за модального перекрытия, даже если он скрыт, я не могу перетащить маркер, а кнопка модальной формы можно щелкнуть, когда я навещусь на скрытую область. – PRASANTH

+1

Вы должны проверить, какие свойства отображения для элемента перекрываются и должны быть скрыты, убедитесь, что его 'css' установлен в' display: none; ', если его в настоящее время имеет' видимость: hidden ', избавиться от этого и измените его на 'display: none;' это будет вашим лучшим выбором, но если вы все еще не можете понять это, вы можете отправить мне ссылку на мой e-mail, так что это не повсюду в Интернете, и я могу проверить это , тебе решать. [email protected] –

ответ

4

Я ответил на этот вопрос в комментариях, но здесь мой официальный ответ, если что-то предположительно будет скрыто на веб-сайте, но он все еще там, вы должны посмотреть на свойства отображения элементов CSS и убедиться, что они установлены на display:none. удалит этот элемент из потока страницы, если этот элемент имеет свойство visibility: hidden, измените его на display:none, так как visibility: hidden удаляет визуальный аспект элемента, но не удаляет его из потока сайта.

6

На всякий случай это поможет кому-то еще, у меня были проблемы с этим, и это произошло потому, что у меня не было столбцов начальной загрузки внутри явно определенного класса строк.

Смежные вопросы