От новичка до гуру: Курсы программирования на CyberDuff

Открыть Modal (бутстрап) из другого html-файла

Я создаю веб-сайт, используя bootstrap. Но я зашел в какой-то тупик. я создал модальное окно из данного примера (см. ниже). Как видите, это модальное окно, взятое прямо с их сайта.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">Nieuwe Taak toevoegen</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Я открываю этот диалог с помощью кнопки.

<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >

Но я хочу, чтобы мои модальные окна находились в отдельных aspx/html-files. Как я могу открыть эти модальные окна, если они хранятся внутри разных html/aspx - files?

пример: если кнопка находится внутри index.Html, а модальное окно внутри newTaskModal.html, как мне открыть модальное окно? (Если оба внутри index.html, то проблем нет)

Примечание. Я не использую/не могу использовать HTML5 (стандарты компании)

javascript html twitter-bootstrap asp.net
02.05.2014

Ответы:


1

если вы используете jquery, вы можете загрузить страницу с помощью вызова ajax:

$.ajax({
  url: 'newTaskModal.html',
  dataType: 'text',
  success: function(data) {
    alert(data);
    // todo:  add the html to the dom...
  }
});

Если вы создаете одностраничное приложение, возможно, вы захотите проверить структуру, предназначенную для решения этого типа проблем: durandal< /а>

02.05.2014
  • Идеально! Я просто загружаю полученный html в div на моем index.html, и проблема решена (не могу поверить, что я не мог решить эту проблему сам...). Спасибо! Этот фреймворк также выглядит весьма полезным. Я попробую в эти выходные. Спасибо и за это! :) 02.05.2014

    • 2

    Вы можете использовать PHP? Если да, то есть простое решение.

    Ваш индекс будет index.php, и там, где вы хотите, чтобы ваш модал просто поместил этот код

    <?php include "newTaskModal.html"; ?>
    02.05.2014
  • Я знаю о возможности использовать «php-include», но я больше ищу в направлении чистого HTML/javascript-решения. 02.05.2014

    • 3

    Также вы можете, если используете JQuery для загрузки своей html-страницы в соответствующий элемент.

    $( "#result" ).load( "ajax/test.html", function() {
    alert( "Load was performed." );
});

    Перейдите на страницу http://api.jquery.com/load/ для получения дополнительной информации.

    18.04.2016

    4

    ШАГ 1 Используйте приведенный ниже код для ссылки:

    <a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>

    ШАГ 2 Используйте приведенный ниже код для модального окна

        <div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog model-sm">`enter code here
        <div class="modal-content"> </div>
    </div>
</div>

    ШАГ 3 Создайте MyModal.html и поместите текст.

    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">Title</h4>
</div>
    <div class="modal-body">
Modal Contents
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success">OK</button>
    </div>

    Примечание. Это может не работать с локальным html. работает только на сервере!

    29.06.2017
    Новые материалы
    Отслеживание состояния с течением времени с дифференцированием снимков
    Время от времени что-то происходит и революционизирует часть моего рабочего процесса разработки. Что-то более забавное вместо типичного утомительного и утомительного процесса разработки. В..
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных.
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных. Пожалуйста, проверьте мой пост Инструментарий специалиста по данным для кодирования категориальных переменных в..
    Игра в прятки с данными
    Игра в прятки с данными Я хотел бы, чтобы вы сделали мне одолжение и ответили на следующие вопросы. Гуглить можно в любое время, здесь никто не забивается. Сколько регионов в Гане? А как..
    «Раскрытие математических рассуждений с помощью Microsoft MathPrompter и моделей больших языков»
    TL;DR: MathPrompter от Microsoft показывает, как использовать математические рассуждения с большими языковыми моделями; 4-этапный процесс для улучшения доверия и рассуждений в математических..
    Раскройте свой потенциал в области разработки мобильных приложений: Абсолютная бесплатная серия
    Глава 6: Работа в сети и выборка данных Глава 1: Введение в React Native Глава 2: Основы React Native Глава 3: Создание пользовательского интерфейса с помощью React Native Глава 4:..
    Все о кейсах: Camel, Snake, Kebab & Pascal
    В программировании вы сталкивались с ними при именовании переменной, класса или функции. Поддержание согласованности типов и стилей случаев делает ваш код более читабельным и облегчает совместную..
    Как работает дистанционное парное программирование и почему оно может изменить вашу жизнь
    Серебряная пуля от одиночества и отвлекающих факторов во время обучения программированию Независимо от того, работаете ли вы или учитесь удаленно, велика вероятность, что одиночество и..
    © 2024 cyberbuff.ru, От новичка до гуру: Курсы программирования на CyberDuff