Проблемы с модальным окном начальной загрузки

#html #twitter-bootstrap #twitter-bootstrap-3

#HTML #twitter-bootstrap #twitter-bootstrap-3

Вопрос:

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

Проблема в том, что при нажатии на ссылку «контакт» на домашней странице отображается модальное окно с содержимым (т. Е. кнопками / текстом), но экран становится серым и не отвечает при нажатии кнопки «закрыть».

 <div class = "modal fade" id = "contact" role = "dialog">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <h4>Contact Tech Site</h4>
            </div>
            <div class = "modal-body">
                                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </div>
            <div class = "modal-footer">
                <button type="button" class = "btn btn-default" data-dismiss = "modal">Close</button>
                <button type="button" class = "btn btn-primary" data-dismiss = "modal">Save changes</button>
            </div>
        </div>
    </div>

</div>
</div>

Чтобы было ясно, вот как выглядит моя страница после нажатия на ссылку «контакт»:
https://www.dropbox.com/s/a8etlue21jfk1ti/Screenshot 2014-06-24 17.54.27.png

Любые советы будут высоко оценены.

1. Где кнопка / ссылка, которая запускает модальное окно? Можете ли вы опубликовать этот код? Кроме того, у вас есть дополнительный </div>

2. <li><a href = «#contact» data-toggle = «модальный»>Контакт</a></li>

3. Не зная точно, что делает ваш код, я бы рискнул предположить, что «серый цвет» на самом деле является div с фиксированной позицией с z-индексом, большим, чем у модального. Вы пробовали вручную установить z-индекс модального на более высокое значение?

4. Он выглядит нормально и работает нормально при загрузке bootply.com/26jF4ICLl7 так что проблема может быть в другом месте, возможно, не в коде, который вы опубликовали

5. Хорошо. Что ж, это хорошая новость. Я просто изучаю Bootstrap и следовал почти строка за строкой из этого урока: youtube.com/watch?v=7YJUFaZMS8Q Что касается других мест, есть какие-нибудь идеи, что может быть причиной проблемы?

Ответ №1:

У вас есть несколько проблем. Вы не закрыли div s, ul s в панели навигации. Кроме того, вы неправильно прокомментировали эту строку  и т. Д. Подробнее:

Вы не закрыли div для этого div <div class="navbar navbar-primary navbar-static-top"> .
Не закрыт ul для этого ul <ul class="nav navbar-nav navbar-right"> .
Не закрыт div для модального div <div class="modal fade" id="contact" role="dialog">

http://fiddle.jshell.net/52VtD/6726/show / Модальный работает нормально.

Итог

Чтобы получить то, что вы ожидали, ваш HTML должен быть чистым и семантическим, без пропусков каких-либо закрывающих элементов,

1. Это работает! Спасибо. Я не осознавал, что даже в исходном коде отсутствует тег div (я думал, что это просто ошибка из фрагмента). Я также заметил, что теги вашего скрипта были перечислены в заголовке, а не внизу. Независимо от того, было ли это проблемой или нет, я отредактировал его соответствующим образом, и теперь модал работает нормально. Ценю вашу помощь.

2. Поскольку это скрипт, он может поместить скрипты в head. Однако лучше всего всегда использовать скрипты непосредственно перед тегом body.