Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 29.11.2017, 19:49   #1
lloudb
Пользователь
 
Регистрация: 09.11.2016
Сообщений: 25
Репутация: 10
По умолчанию Не выходит модальное окно

Всем привет! Пишу сайт на bootstrap. Пользуюсь документацией с офф. сайта bootstrap. При нажатии на кнопку ничего не происходит.

Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Заявка</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-3">Оформление заявки</h1>
        <div class="container-fluid">
            <form>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>

                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <h5>Popover in a modal</h5>
                                        <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
                                        <hr>
                                        <h5>Tooltips in a modal</h5>
                                        <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <label>Название объекта</label>
                    </div>

                    <div class="form-group col-md-6">
                        <select class="form-control form-control-sm">

                            <option selected>Выберите неисправность...</option>
                            <option>Возгорание</option>
                            <option>Поломка</option>
                            <option>Задымление</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <select class="form-control form-control-sm">

                            <option selected>Выберите приоритет...</option>
                            <option>A</option>
                            <option>B</option>
                            <option>C</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" class="form-control form-control-sm" placeholder="Контактное лицо">
                    </div>
                </div>
                <div class="form-group">
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Информация"></textarea>
                </div>
            </form>
        </div>
    </div>
    <div class="center">
        <button type="button" class="btn btn-success">Отправить</button>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="js/script.js"></script>
</body>
</html>

lloudb вне форума   Ответить с цитированием
Старый 29.11.2017, 20:56   #2
ADSoft
Профессионал
 
Регистрация: 25.02.2007
Адрес: Татарстан
Сообщений: 3,202
Репутация: 896

icq: 303-206-418
skype: ad-soft.info
По умолчанию

там само окно вроде должно находиться прямо за <body>
ADSoft вне форума   Ответить с цитированием
Старый 29.11.2017, 21:37   #3
olegK<<
Форумчанин
 
Аватар для olegK<<
 
Регистрация: 05.11.2017
Адрес: Кропивницкий
Сообщений: 60
Репутация: 10

icq: 491861664
skype: wheeldraff
По умолчанию

"Модальный" блок должен быть скрыт. Ошибки в консоли проверяли ?
Выложите сайт в сеть, так проще определить ошибку.
п..с.
Обычно окно вcплывашку размещают перед тегом <body>

Последний раз редактировалось olegK<<; 29.11.2017 в 22:12. Причина: вспомнил.
olegK<< вне форума   Ответить с цитированием
Старый 30.11.2017, 14:49   #4
lloudb
Пользователь
 
Регистрация: 09.11.2016
Сообщений: 25
Репутация: 10
По умолчанию

Так?
Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Заявка</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h5>Popover in a modal</h5>
                <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
                <hr>
                <h5>Tooltips in a modal</h5>
                <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-3">Оформление заявки</h1>
        <div class="container-fluid">
            <form>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>
                        <label>Название объекта</label>
                    </div>

                    <div class="form-group col-md-6">
                        <select class="form-control form-control-sm">

                            <option selected>Выберите неисправность...</option>
                            <option>Возгорание</option>
                            <option>Поломка</option>
                            <option>Задымление</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <select class="form-control form-control-sm">

                            <option selected>Выберите приоритет...</option>
                            <option>A</option>
                            <option>B</option>
                            <option>C</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" class="form-control form-control-sm" placeholder="Контактное лицо">
                    </div>
                </div>
                <div class="form-group">
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Информация"></textarea>
                </div>
            </form>
        </div>
    </div>
    <div class="center">
        <button type="button" class="btn btn-success">Отправить</button>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="js/script.js"></script>
</body>
</html>

Ошибок в консоле нет.
Изображения
Тип файла: jpg Screenshot at 2017-11-30 13:49:11.jpg (48.4 Кб, 0 просмотров)
lloudb вне форума   Ответить с цитированием
Старый 30.11.2017, 14:57   #5
lloudb
Пользователь
 
Регистрация: 09.11.2016
Сообщений: 25
Репутация: 10
По умолчанию

Использую Bootstrap 4, попробовал подключить Bootstrap 3 - модальное окно вышло. В чем может быть проблема? Делал по документации Bootstrap 4.
lloudb вне форума   Ответить с цитированием
Старый 30.11.2017, 16:59   #6
olegK<<
Форумчанин
 
Аватар для olegK<<
 
Регистрация: 05.11.2017
Адрес: Кропивницкий
Сообщений: 60
Репутация: 10

icq: 491861664
skype: wheeldraff
По умолчанию

Сорри , уточню перед закрывающим тегом </body> . И советую применять комментарии в коде, и другим проще и быстрее понять где что .
Код:

<!-- Модальное окно -->

Я когда делал всплывашку, правда на bootstrap 3 , то отлаживал по блочно- сначала тело всплывашки, а потом наполнял.
olegK<< вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно PR0Z0N Фриланс 1 31.10.2012 19:09
Модальное окно Sprat PHP 3 28.03.2012 16:04
Модальное окно adm2010 Общие вопросы Delphi 2 28.09.2011 22:21
модальное окно JDialog legendary Общие вопросы по Java, Java SE, Kotlin 3 06.04.2011 03:14


07:02.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru