Nano Hash - криптовалюты, майнинг, программирование

Модальное окно начальной загрузки Twitter не работает

Я новичок в Twitter Bootstrap. Я работаю над модальной панелью, но она не отображается. Выцветает экран, но сам модал не появляется. Проверил консоль ошибок, ошибок нет.

Мой код находится внутри тега <head>; Я включаю сценарии, такие как:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $ruadmin ?>js/bootstrap.js"></script>
<script src="<?php echo $ruadmin ?>js/tablesorter/jquery.tablesorter.js"></script>
<script src="<?php echo $ruadmin ?>js/tablesorter/tables.js"></script>

Модальная страница:

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Welcome</h3>
  </div>
  <div class="modal-body">
    <p> Hello </p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>
javascript jquery twitter-bootstrap modal-dialog
09.12.2013

  • У меня были bootstrap.js и bootstrap.min.js, добавленные через bundleconfig в моем проекте asp.net MVC, и я увидел, что все это работает хорошо после удаления bootstrap.min.js и сохранения только bootstrap.js 19.10.2016

Ответы:


1

Вам нужно использовать тег data-target.

Попробуйте заменить атрибут href="#myModal" на data-target="#myModal". Кроме того, вы поставили класс hide, думаю, его там быть не должно.

Посмотрите примеры здесь

09.12.2013
  • да, это сработало. проблема была из-за hide class.thanks :) 09.12.2013

    • 2

    Измените это:

    <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

    К этому:

    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

    (обратите внимание, что изменение тега a на тег button не является ответом, а добавляет атрибуты data-target и data-toggle, которые "работают")

    Пожалуйста, посмотрите на этот пример:

    <!DOCTYPE html >

<html>
<head>
    <title>Bootstrap Modal</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>    
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</head>
<body>
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="purchaseLabel">Purchase</h4>
                </div>
                <div class="modal-body">
                    sup?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Purchase</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
    09.12.2013
  • Изменение a на button ничего не даст. Хитрость заключается в установке атрибута data-target. Вы должны подчеркнуть это в своем ответе. 03.12.2014

    • 3

    У меня была такая же проблема, я понял, что включаю библиотеку JQUERY после BOOTSTRAP.

    Убедитесь, что на вашей веб-странице вы добавляете/связываете сначала JQUERY, а затем Bootstrap

    06.12.2015

    4

    В случае, если кто-то столкнется с этой проблемой, и ничего из вышеперечисленного не работает, у меня не было исчезновения класса css в атрибуте класса моего модального окна.

    У меня был div моего модального окна, как это

    <div class="modal" id="AdvanceSearchModal" tabindex="-1" role="dialog">

    Я добавил класс затухания

    <div class="modal fade" id="AdvanceSearchModal" tabindex="-1" role="dialog">

    и при этом модальное снова открывается

    12.08.2016

    5

    Bootstrap Modal не любит Id, которые начинаются с number.

    У меня был UUID как мой data-target, и он не работал.

    <button data-target="#7CB2ED35-3AE1-44FD-AEA8-D953E5C953D5">Launch Modal</button>

    Я решил это, добавив "M-" перед всеми моими UUID, чтобы они по-прежнему были уникальными:

    <button data-target="#M-7CB2ED35-3AE1-44FD-AEA8-D953E5C953D5">Launch Modal</button>

    ✌????????

    01.06.2020
  • Вау, это так раздражало. Посмотрев повсюду, ни одно из этих решений не работало до этого. Спасибо! 03.07.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..