2014-08-27 3 views
0

У меня есть модальный набор как этотBootstrap - режимный не работают

<body> 
<div class="modal fade" id="pageopen" 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"> 
        x 
       </button> 
       <h4 class="modal-title" id="myModalLabel"> 
        This Modal title 
       </h4> 
      </div> 
      <div class="modal-body"> 
       Add some text here 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary"> Submit changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal --> 
</div> 

<button onclick="showModal('http://www.google.co.id/')">Show Modal</button> 

</body> 

Я добавил последнюю JQuery, бутстраповские JS и CSS только для модальной плагин.
Проблема заключается в том, что модальный фон показывает, однако модальный корпус заголовка и т. Д. Не отображается.

My Code

Просьба предоставить решение, спасибо

+0

Как кнопка связана с модальный? Pls перейдите по адресу http://getbootstrap.com/javascript/#modals и посмотрите, как '

ответ

2

Ваш код Javascript неправильно, чтобы открыть Bootstrap 3 Modal вы должны использовать:

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

Если вы хотите загрузить внешнюю страницу, вы можете указать здесь URL:

$('#pageopen').modal({ 
    show: true, 
    remote: 'http://www.example.com' 
}); 

И лучше использовать функцию jQuery click вместо «onClick».

+0

А, спасибо. Это то, что мне нужно. Кстати, проблема на моей странице связана с тем, что я загрузил 2 отдельных css для начальной загрузки, поэтому модальный класс накладывался друг на друга и просто разрушал модальный стиль. в любом случае спасибо за решение – godheaper

0

Ваша проблема в том, что функция showModal не найден onclick, пожалуйста, прекратите использование OnClick в вашем HTML навсегда. Это никогда не было хорошей практикой. Вместо этого установите идентификатор для кнопки и использовать .click функцию в JQuery:

<button id="showModal">Show Modal</button> 

$("#showModal").click(function(){ 
    $('#pageopen').modal(); 
}); 

Check JSFiddle Demo

+0

Спасибо за ваше решение. Я буду помнить, что не буду использовать html-события в следующий раз. – godheaper

0

Ха-ха, неважно. У меня есть отдельные js и css для одного и того же компонента начальной загрузки, чтобы они перекрывались друг с другом.

Подсказка для начальной загрузки:
Всегда загружайте только один JS файл и один файл CSS для начальной загрузки.
Если вы похожи на меня, которые хотят только часть загрузочного лотка вместо всего пакета (например: модальный, переходный и карусельный), то сделайте его как один js и css из getbootstrap

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