Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

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

Всем привет! Пишу сайт на 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, 19:56   #2
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

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

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

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

Так?
Код:
<!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 Кб, 126 просмотров)
lloudb вне форума Ответить с цитированием
Старый 30.11.2017, 13:57   #5
lloudb
Пользователь
 
Регистрация: 08.11.2016
Сообщений: 25
По умолчанию

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

Сорри , уточню перед закрывающим тегом </body> . И советую применять комментарии в коде, и другим проще и быстрее понять где что .
Код:
<!-- Модальное окно -->
Я когда делал всплывашку, правда на bootstrap 3 , то отлаживал по блочно- сначала тело всплывашки, а потом наполнял.
olegK<< вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно 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