2015-11-25 2 views
0

Я работаю над формой, которая загружает контент из меню флажка.Добавить стиль в bootstrap modal content div

Если пользователь проверяет флажок, модальный всплывающий ботстрап v3.3.4 и выбранный контент отображаются в модальном формате.

Вот код, когда модальный закрыт:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title" id="myModalLabel">My Modal Title</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="box">MY CONTENT IS HERE</div> 
     </div> 
     <div class="modal-footer">Footer text is here</div> 
    </div> 
    </div> 
</div> 

Когда модальный открыт, стиль добавляется к <div class="box"> как это: <div class="box" style="display: block;">

Я бы очень хотел, чтобы добавить больше стилей для этого div, но только тогда, когда модальная функция открыта. Откуда добавляется стиль? Я проверил файлы jquery.js и bootstrap.js и не могу понять это. Также попробовал различные, если утверждения бесполезны. то есть $('#myModal').is(':visible');

Большое спасибо за любые советы.

+0

Просто бейте его в CSS, предоставляя правила после Bootstrap CSS называется, ваш CSS будет перезаписывать их. Поскольку (предположительно) модальный будет отображаться: none, вы, вероятно, могли бы добавить правила в модальное без их видимости до тех пор, пока не будет активен. – ggdx

+0

Обратитесь к этому http://stackoverflow.com/questions/20854035/is-it-possible-to-customize-style-of-bootstrap-modal –

+0

Если '.box' не отображается сначала, не можете ли вы просто добавить ваши стили к нему в вашем CSS? '.box {/ * Styles * /}' – Arg0n

ответ

0

Самый простой способ - проверить, открыт ли модальный или нет, проверить, имеет ли модальный элемент класс, добавленный к нему при открытии модального мода.

$('#myModal').hasClass('in') 

Рабочий пример: http://jsfiddle.net/3kgbG/1151/

+0

Thx! Еще один вопрос. В приведенном ниже коде box div, который имеет стиль с отображением: block - это часть, отображаемая в модальном режиме. Я хочу, чтобы он был проверен. Я не хочу, чтобы другой вход, который не отображался, был проверен. Это возможно? '$ (document) .ready (function() { \t if ($ ('# myModal'). HasClass ('in')); { $ (". Checkthis "). Prop (" checked "," true "); \t} });

' –

+0

Вы можете это сделать, но для этого вам не нужно проверять, открыт ли модальный или нет. Вы можете просто перехватить его при открытии модального http://jsfiddle.net/3kgbG/1152/ – DinoMyte

+0

Спасибо! Хм, кажется, что второй ящик все еще проверяется, хотя я не добавил его к модальному. Оптимально второй флажок должен оставаться непроверенным ... Я обновил скрипку здесь, чтобы проиллюстрировать. Thx куча. http://jsfiddle.net/3kgbG/1159/ –

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