2014-01-16 4 views
1

У меня есть загрузочные модальные установки со следующим кодом:Bootstrap Модальный Не Показан, выходы JS

<div class="modal hide fade" id="myModal"> 
    <div class="modal-header"> 
     <a class="close" data-dismiss="modal">×</a> 
     <h3>Testimonials</h3> 
    </div> 
    <div class="modal-body"> 
     <p>Test Text Here</p> 
    </div> 
    <div class="modal-footer"> 
     <a class="btn" data-dismiss="modal">Close</a> 
    </div> 
</div> 

<button class="btns btn-3 btn-3g btnsx" data-toggle="modal" href="#myModal">More</button> 

Однако, я получаю только черный фон при нажатии кнопки.

Я также видел некоторые из моих JS, появляющихся в нижней части моей страницы (только тогда, когда код модальный вставлен):

.on('submit', function() { var form = $(this); var post_data = form.serialize(); //Serialized the form data for process.php $('#loader').html('loadng Please Wait...'); $.ajax({ type: 'POST', url: 'http://shazconstruction.com/test/process.php', // Your form script data: post_data, success: function(msg) { $('#loader').html(''); // We know this is the form that needs fading in/out $('form#contactUs').fadeOut(500, function(){ $('form#contactUs').html(msg).fadeIn(); }); } }); return false; }); }); 

Вот сайт, где все существует: http://bit.ly/1dbf4Rz

Для справки, это раздел с модальной настройкой: http://i.imgur.com/1SlNR1s.png

+0

Если вы посмотрите на исходный код, вы увидите, что у вас есть скрипт в текстовом формате, и вы закрыли тело и HTML два раз, вы можете вставить его неправильно – Spokey

ответ

1

Проверьте исходный код вашей страницы. Однако он генерируется с довольно явной ошибкой: http://screencast.com/t/GZv0KwPktoO

Посмотрите на строку 762. Нет тега сценария открытия, так что это объясняет, почему вы видите ваш JS, появляющийся внизу страницы.

Что касается остальной части, то BaBL86 прав, вы хотите исправить проблему с помощью скрипта mousewheel, поскольку он бросает ошибки, которые заставляют страницу останавливать рендеринг JS.

Как только эти два вопроса исправлены, сообщите нам, если есть проблемы.

Редактировать: У вас также есть неправильный HTML-код для вашего модального окна (основанный на документации по загрузке 3). Попробуйте использовать это вместо того, чтобы, и перемещая модальное окно справа после тега тела:

<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"> 
       <a class="close" data-dismiss="modal">×</a> 
       <h3>Test Header</h3> 
      </div> 
      <div class="modal-body"> 
       <p>Test Text Here</p> 
      </div> 
      <div class="modal-footer"> 
       <a class="btn" data-dismiss="modal">Close</a> 
      </div> 
     </div> 
    </div> 
</div> 
1

У вас есть ошибка в функции колесиковидной мыши. Проверьте этот ответ, он об этой проблеме:

function handler(event) { 
    < ---- > 
    return $.event.handle.apply(this, args); // error here 
} 

Корректировать функцию:

return $.event.dispatch.apply(this, args); 
0

Вы дали !important к .hide. Удалите imporant

Из этого

display: none!important; 

Для

display: none; 

Я также вижу, что вы не даете никакого background-color. Используйте тот же код с bootstrap

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