Модальное окно на bootstrap 3



модальное окно на bootstrap 3

Контактная форма в модальном окне Bootstrap3 - JavaScript

28.08., 00:24 Контактная форма в модальном окне Bootstrap3

Сделала форму отправки сообщения по этой статье Там использовалась вторая, предыдущая версия фреймворка bootstrap2.

я собачий язык Jquery вовсе не понимаю, однако, имхо, вы поставили себя в ситуацию, когда говорят: или шляпу снимите, или трусы наденьте (с)

представьте, что у вас вообще нет никаких скриптов

вопрос 1: к чему тогда приведёт нажатие на кнопку input type= submit ?

ответ 1: текущая страница перегрузится на ту, адрес которой указан в атрибуте ACTION тега form

вопрос 2: а если ничего не указано в этом атрибуте, его вообще нет?

ответ 2: произойдёт перезагрузка этой же страницы

а теперь вы добавили скрипт. который по нажатию на эту же кнопку вызывает серверный файл по ajax-технологии

вопрос 3: отменяет ли этот скрипт поведение, описанное в вопросах 1 и 2?

ответ 3: нет, не отменяет, страница, отправив аякс-запрос, начнёт перезагружаться

вопрос 4: а кто получит аякс-ответ сервера

ответ 4: никто не получит, ибо обновлённая страница - это НОВЫЙ документ, скрипты из предыдущего документа в нём не работают

вопрос 5: так и чЁ тАперЯ делать?

ответ 5: изменить тип кнопки, сделать его type= button

Отзыва / Комментарии

Создание модального окна (Bootstrap 3: добавь интерактивность на свой сайт)

Теперь, когда у нас есть галерея миниатюр, нам нужно настроить модальные окна. К концу этого видео мы создадим по модальному окну для каждой миниатюры. Они еще не будут связаны друг с другом, но по крайней мере, у нас будет готов весь исходный контент, и после связывания они будут функционировать. Итак, для создания модальных окон нам понадобится некоторый код HTML из тренировочных файлов. Если вы откроете папку с тренировочными файлами, перейдите ко второй главе, видео номер три, в папку start.

Вы найдете здесь файл под названием modal window start markup . Откройте его в Sublime Text. Нам нужно скопировать код из этого файла. Просто выделите все содержимое и скопируйте его. И нам нужно вставить его в файл exec.html. Мы поместим его после тега container, но перед JavaScript. Итак, просто вставьте его сюда. Почему мы размещаем его именно здесь? В принципе, модальные окна могут находиться в любом месте вашего кода HTML, потому что они не являются обычной частью вашей HTML-страницы.

Текст, который находится здесь, будет появляться только после нажатия на соответствующую миниатюру, так что вы можете поместить этот код в любом месте страницы. Я предпочитаю размещать его внизу, чтобы при загрузке страницы ее контент быстрее отображался пользователям. А модальные окна могут загружаться и в самом конце. Итак, в первую очередь вы можете заметить, что каждое модальное окно находится в блоке div. У каждого блока есть идентификатор, который соответствует фамилии сотрудника.

Эти идентификаторы придумала я сама. Тег h3 содержит имя сотрудника. Далее идет параграф с ссылкой на изображение. Здесь выводятся большие версии изображений, которые находятся в папке images. Изображению присвоено два класса. Первый - img-responsive. Если помните, в Bootstrap этот класс необходим для того, чтобы размер изображения менялся в соответствии с размером экрана. Таким образом, если экран уменьшится, картинка тоже уменьшится. При увеличении экрана она будет расти, пока не достигнет максимального размера.

Pull-left в данном случае представляет собой класс Bootstrap, который будет выравнивать изображение по левой границе окна. Внизу, на 64-й строке, для Сесилии Фортро класс pull-right будет выравнивать изображение по правой стороне. Все классы, которые здесь используются, входят в основной код Bootstrap. Я не добавляла сюда ничего, кроме идентификаторов, к которым мы скоро вернемся. Итак, в этом видео я настрою для вас первое модальное окно. Посмотрев этот урок, вы сможете настроить все остальные окна самостоятельно.

Я сохраню финальную разметку для всех модальных окон в тренировочных файлах, в папке final для видео номер три второй главы. Итак, что же нам понадобится добавить в разметку? Я начну работать здесь, на 57-й строке, с окном для Далии Лэндон. В первую очередь нам нужно добавить некоторый код в идентификатор, а именно - класс, который будет идентифицировать этот блок как модальное окно, и еще один класс под названием Fade , благодаря которому это модальное окно будет появляться и исчезать, при условии что в браузере включен JavaScript.

Таким образом, к блоку div с идентификатором Landon мы добавим классы modal и fade. Не забывайте, что здесь вы можете добавить сколько угодно классов, просто записав их друг за другом. Мы также добавим тег tabindex со значением -1. Tabindex определяет доступность элемента. Это значит, что если пользователь попытается прочитать данную страницу с помощью скринридера, то скринридер не сможет увидеть разметку для модальных окон.

Следующее, что мы собираемся сделать, - это добавить блок div с классом modal-dialogue. Этот блок будет заканчиваться здесь. Сейчас я изменю отступы, чтобы немного облегчить чтение. В Sublime Text если вы просто выделите код и нажмете клавишу табуляции, то вы сможете изменить отступ всего выделенного кода. Таким образом, этот div с классом modal-dialogue начинается на 58-й строке и заканчивается на 61-й.

ОК, затем мы добавим заголовок для модального окна. Для него мы создадим div с классом modаl-header. И конечно, в этот блок мы добавим наш тег H3. Опять же, чтобы сделать код немного более читабельным, я смещу тег H3 вправо. Немного выше этого кода мы также добавим еще один элемент, а именно - маленький крестик в правом верхнем углу модального окна. Итак, давайте добавим здесь немного кода.

Это будет кнопка с типом button и классами close, glyphicon и glyphicon-remove. Класс close, естественно, задаст определенный размер для этой кнопки. Если помните, класс glyphicon указывает на встроенный в Bootstrap набор символов - глификонов (Glyphicons). Класс glyphicon всегда нужно сочетать с еще одним классом, который будет указывать, какой именно символ вы хотите использовать.

В нашем случае glyphicon-remove обозначает крестик. Вы можете найти все классы glyphicon и соответствующие им символы в документации Bootstrap на сайте getbootstrap.com. ОК, и последнее, что мы собираемся добавить к этой кнопке, - это атрибут data-dismiss со значением modаl. Для чего он нужен? В HTML 5 все атрибуты вида data дефис что-нибудь еще указывают на то, что код работает с JavaScript, чтобы что-нибудь сделать.

В этом случае, просто взглянув на то, что здесь написано, вы можете предположить, что, нажав этот маленький крестик, вы закроете модальное окно, и будете абсолютно правы. Таким образом, data-dismiss со значением modal будет закрывать модальное окно при нажатии на крестик. И он будет связываться с соответствующим кодом JavaScript. Итак, теперь мы можем закрыть тег кнопки, для чего запишем слэш button . Мы размещаем его до тега Н3, который уже относится к макету.

И справа от заголовка у нас появится маленький крестик, а слова Далия Лэндон будут выровнены по левой стороне. ОК, далее нам нужно добавить тело модального окна. Блок div с классом modal-body. И конечно, в него мы заключим этот прекрасный абзац текста и изображение. И мы закроем этот div. Наконец, мы переходим к футеру. Вы, наверное, удивитесь, потому что для него мы создадим блок div с классом. modal-footer! В него мы поместим еще одну кнопку.

Иногда люди не понимают, для чего нужен крестик в верхнем правом углу. Поэтому можно дублировать эту функциональность внизу, добавив кнопку, например, с надписью Close . Итак, давайте напишем для нее код. Мы можем просто поместить здесь тег button с классами btn btn-primary. Если вы помните из уроков курса Bootstrap 3 для начинающих , посвященных кодированию кнопок и ссылок, которые выглядят как кнопки, сам класс btn создаст внутреннюю границу и макет кнопки, а btn-primary наложит цвет. В этом случае он применит основной цвет Bootstrap - синий. Затем мы, опять же, добавим атрибут данных, data-dismiss со значением modal. Мы также поместим сюда слово Сlose , потому что оно будет текстом нашей кнопки, и конечно, закроем тег button, а затем - тег div. Ок, теперь у нас есть заголовок, тело и футер модального окна, и мы можем начать закрывать те 100500 тегов div, которые мы открыли.

Таким образом, у нас есть открывающий и закрывающий теги div на строках 59 и 62, открывающий и закрывающий теги на строках 63 и 65, открывающий и закрывающий теги на строках 66 и 68. Теперь мы должны убедиться, что все остальные теги div также закрыты. Тег div со слэшем на строке 69 закрывает тег с классом modal-dialogue на строке 58. И наконец, тег на 57 строке закрывается на строке 70. Что ж, это макет для одного модального окна Bootstrap.

Я не использовала здесь никакого пользовательского кода, весь код и все стили изначально были включены в Bootstrap. Теперь вам нужно повторить этот процесс для всех остальных модальных окон. На этой странице их еще шесть. Я сделаю это за кадром и сохраню для вас конечный результат в тренировочных файлах, в папке final для этого видео. Если хотите, вы можете скопировать и вставить его в ваш документ HTML.

Источники: http://www.cyberforum.ru/javascript/thread944641.html






Комментариев пока нет!

Поделитесь своим мнением

Сумма: код подтверждения