Метод html jquery: Метод .html() | jQuery справочник

 $ ('div.main '). html (' 
 Главное содержимое Div 
 ') 

Внутри нашего основного блока есть три элемента абзаца. Зная, как работает html () , мы можем сделать вывод, что приведенный выше код заменит три тега

на один, переданный в качестве параметра. Прочтите наше руководство по изучению HTML, чтобы углубиться в описанную выше концепцию

В одной строке кода мы заменили три разных элемента абзаца и использовали наш оригинальный стиль класса.

Заключение

jQuery html () - это широко используемый метод замены содержимого на HTML-страницах для создания динамического взаимодействия.Поскольку html () заменяет содержимое, заключенное внутри элементов HTML, важно обращать внимание на селекторы jQuery и любые классы стилей. Это предотвратит нежелательные изменения стиля.

Мы узнали, что такое jQuery, его синтаксис и пример того, как его можно использовать. Потратьте некоторое время на то, чтобы попрактиковаться в этом широко используемом методе.

Методы jQuery

По

HTML-методы jQuery с примерами

HTML-методы jQuery позволяют управлять DOM с помощью некоторых особых синтаксических правил. HTML-методы jQuery могут использоваться для изменения атрибутов элемента, установки свойств стиля элементов, вставки, копирования, удаления и т. д. Ниже приведены HTML-методы jQuery

.

Пример метода jQuery html () - Java2Blog

Главная> javascript> Пример метода jQuery html ()

В этом посте мы увидим метод jQuery html.Метод

html используется для получения содержимого html первых сопоставленных элементов, другие элементы будут игнорироваться, а html («новое содержимое html») используется для установки содержимого html для всех сопоставленных элементов.

Синтаксис для html ():

Синтаксис для HTML («новое содержание HTML»):

Разберемся на примере:

Живая демонстрация: пример метода JQuery html на jsbin.com

Поделиться

• Назад

  Как установить или снять флажок ввода или переключателя в jQuery

• Далее

  [решено] неперехваченная ошибка ссылки: $ не определено

Ванильные эквиваленты JS методов jQuery · GitHub

События

 // jQuery
$ (документ).ready (function () {
  // код
})

// Ваниль
document.addEventListener ('DOMContentLoaded', function () {
  // код
}) 

 // jQuery
$ ('a'). click (function () {
  // код…
})

// Ваниль
[] .forEach.call (document.querySelectorAll ('a'), function (el) {
  el.addEventListener ('щелчок', function () {
    // код…
  })
}) 

Селекторы

 // jQuery
var divs = $ ('div')

// Ваниль
var divs = document.querySelectorAll ('div') 

 // jQuery
var newDiv = $ ('
')

// Ваниль
var newDiv = документ.createElement ('div') 

Атрибуты

 // jQuery
$ ('img'). filter (': first'). attr ('alt', 'Мое изображение')

// Ваниль
document.querySelector ('img'). setAttribute ('alt', 'Мое изображение') 

Классы

 // jQuery
newDiv.addClass ('фу')

// Ваниль
newDiv.classList.add ('foo') 

 // jQuery
newDiv.toggleClass ('foo')

// Ваниль
newDiv.classList.toggle ('foo') 

Манипуляции

 // jQuery
$ ('тело'). добавить ($ ('
'))

// Ваниль
документ.body.appendChild (document.createElement ('p')) 

 // jQuery
var clonedElement = $ ('# о'). clone ()

// Ваниль
var clonedElement = document.getElementById ('about'). cloneNode (true) 

 // jQuery
$ ('# перенос'). пустой ()

// Ваниль
var wrap = document.getElementById ('обертка')
в то время как (wrap.firstChild) wrap.removeChild (wrap.firstChild) 

Поперечный

 // jQuery
var parent = $ ('# о'). parent ()

// Ваниль
var parent = document.getElementById ('about'). parentNode 

 // jQuery
if ($ ('# перенос').пустой'))

// Ваниль
если (! document.getElementById ('обертка'). hasChildNodes ()) 

 // jQuery
var nextElement = $ ('# перенос'). следующий ()

// Ваниль
var nextElement = document.getElementById ('обертка'). nextSibling 

AJAX

ПОЛУЧИТЬ

 // jQuery
$ .get ('// example.com', function (data) {
  // код
})

// Ваниль
var httpRequest = новый XMLHttpRequest ()
httpRequest.onreadystatechange = функция (данные) {
  // код
}
httpRequest.open ('ПОЛУЧИТЬ', URL-адрес)
httpRequest.send () 

ПОСТ

 // jQuery
$.post ('// example.com', {username: username}, function (data) {
  // код
})

// Ваниль
var httpRequest = новый XMLHttpRequest ()
httpRequest.onreadystatechange = функция (данные) {
  // код
}
httpRequest.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded')
httpRequest.open ('POST', URL-адрес)
httpRequest.send ('username =' + encodeURIComponent (имя пользователя)) 

JSONP

 // jQuery
$ .getJSON ('// openexchangerates.org/latest.json?callback=?', функция (данные) {
  // код
})

// Ваниль
function success (data) {
  // код
}
var scr = документ.createElement ('сценарий')
scr.src = '//openexchangerates.org/latest.json?callback=formatCurrency'
document.body.appendChild (scr) 

Подробнее

Вот несколько дополнительных ссылок, демонстрирующих ванильные эквиваленты javascript-методов jquery:

См. Также серию из двух частей, в которой показаны эквиваленты для ...

Использование Fetch - веб-API

Fetch API предоставляет интерфейс JavaScript для доступа и управления частями конвейера HTTP, такими как запросы и ответы.Он также предоставляет глобальный метод fetch () , который обеспечивает простой и логичный способ асинхронной выборки ресурсов по сети.

Подобная функциональность ранее была реализована с помощью XMLHttpRequest . Fetch предоставляет лучшую альтернативу, которая может быть легко использована другими технологиями, такими как Service Workers . Fetch также предоставляет единое логическое место для определения других связанных с HTTP концепций, таких как CORS и расширения HTTP.

Спецификация fetch отличается от jQuery.ajax () следующими важными способами:

• Обещание, возвращенное из fetch () , не будет отклонено при статусе ошибки HTTP , даже если ответом является HTTP 404 или 500. Вместо этого, как только сервер ответит заголовками, обещание разрешится нормально (с для свойства ok ответа установлено значение false, если ответ не находится в диапазоне 200–299), и он будет отклонен только при сбое сети или если что-то помешало завершению запроса.
• fetch () не будет отправлять файлы cookie из разных источников , если вы не установите параметр инициализации учетных данных . (С апреля 2018 года. Спецификация изменила политику учетных данных по умолчанию на с одинаковым происхождением . Firefox изменился с версии 61.0b13.)

Базовый запрос на выборку действительно прост в настройке. Взгляните на следующий код:

  выборка ('http://example.com/movies.json')
  .then (ответ => response.json ())
  .then (data => console.журнал (данные));
  

Здесь мы получаем файл JSON по сети и выводим его на консоль. В простейшем случае fetch () принимает один аргумент - путь к ресурсу, который вы хотите получить, - и не возвращает напрямую тело ответа JSON, а вместо этого возвращает обещание, которое разрешается с помощью объекта Response .

Объект Response , в свою очередь, не содержит непосредственно фактического тела ответа JSON, а вместо этого является представлением всего ответа HTTP.Итак, чтобы извлечь содержимое тела JSON из объекта Response , мы используем метод json () , который возвращает второе обещание, которое разрешается в результате синтаксического анализа текста тела ответа как JSON.

Примечание: См. Раздел «Тело» для получения информации об аналогичных методах извлечения других типов содержимого тела.

Запросы

Fetch управляются директивой connect-src политики безопасности контента, а не директивой ресурсов, которые она извлекает.

Поставка параметров запроса

Метод fetch () может дополнительно принимать второй параметр, объект init , который позволяет вам управлять рядом различных настроек:

См. fetch () для полных доступных опций и более подробной информации.

 
асинхронная функция postData (url = '', data = {}) {
  
  const response = await fetch (url, {
    метод: 'POST',
    режим: 'корс',
    кеш: 'без кеша',
    учетные данные: 'то же происхождение',
    заголовки: {
      'Content-Type': 'приложение / json'
      
    },
    перенаправление: 'следовать',
    referrerPolicy: 'без реферера',
    тело: JSON.stringify (данные)
  });
  вернуть response.json ();
}

postData ('https://example.com/answer', {ответ: 42})
  .then (data => {
    console.log (данные);
  });
  

Обратите внимание, что mode: "no-cors" допускает только ограниченный набор заголовков в запросе:

• Принять
• Accept-Language
• Content-Language
• Content-Type со значением application / x-www-form-urlencoded , multipart / form-data или text / plain

Отправка запроса с включенными учетными данными

Чтобы браузеры отправляли запрос с учетными данными, включенными как в вызовы из одного источника, так и из другого источника, добавьте учетные данные : 'include' в объект init , который вы передаете в fetch () метод.

  fetch ('https://example.com', {
  учетные данные: "включить"
});
  

Примечание: Access-Control-Allow-Origin запрещено использовать подстановочный знак для запросов с учетными данными : 'include' . В таких случаях необходимо указать точное происхождение; даже если вы используете расширение разблокировщика CORS, запросы все равно не будут выполнены.

Если вы хотите отправить учетные данные только в том случае, если URL-адрес запроса находится в том же источнике, что и вызывающий скрипт, добавьте учетные данные : 'same-origin' .

 

fetch ('https://example.com', {
  учетные данные: 'то же происхождение'
});
  

Чтобы вместо этого браузеры не включали учетные данные в запрос, используйте учетные данные : «опустить» .

  fetch ('https://example.com', {
  учетные данные: "опустить"
})
  

Загрузка данных JSON

Используйте fetch () для POST данных в кодировке JSON.

  const data = {имя пользователя: 'пример'};

fetch ('https://example.com/profile', {
  метод: 'POST',
  заголовки: {
    'Content-Type': 'application / json',
  },
  тело: JSON.stringify (данные),
})
.then (ответ => response.json ())
.then (data => {
  console.log ('Успех:', данные);
})
.catch ((ошибка) => {
  console.error ('Ошибка:', ошибка);
});
  

Загрузка файла

Файлы могут быть загружены с помощью элемента ввода HTML , FormData () и fetch () .

  const formData = новые FormData ();
const fileField = document.querySelector ('input [type = "file"]');

formData.append ('имя пользователя', 'abc123');
formData.append ('аватар', fileField.files [0]);

fetch ('https://example.com/profile/avatar', {
  метод: 'PUT',
  body: formData
})
.then (ответ => response.json ())
.then (результат => {
  console.log ('Успех:', результат);
})
.catch (error => {
  console.error ('Ошибка:', ошибка);
});
  

Загрузка нескольких файлов

Файлы могут быть загружены с помощью элемента ввода HTML , FormData () и fetch () .

  const formData = новые FormData ();
const photos = document.querySelector ('input [тип = "файл"] [несколько]');

formData.append ('название', 'Мой отпуск в Вегасе');
for (let i = 0; i  response.json ())
.then (результат => {
  console.log ('Успех:', результат);
})
.catch (error => {
  console.error ('Ошибка:', ошибка);
});
  

Обработка текстового файла построчно

Фрагменты, считываемые из ответа, не разбиваются аккуратно на границах строк и представляют собой массивы Uint8Arrays, а не строки.Если вы хотите получить текстовый файл и обработать его построчно, вам решать эти сложности. В следующем примере показан один из способов сделать это, создав итератор строки (для простоты предполагается, что используется текст в кодировке UTF-8, и не обрабатываются ошибки выборки).

  асинхронная функция * makeTextFileLineIterator (fileURL) {
  const utf8Decoder = новый TextDecoder ('utf-8');
  const response = ожидание выборки (fileURL);
  const reader = response.body.getReader ();
  let {value: chunk, done: readerDone} = ждать читателя.читать();
  кусок = кусок? utf8Decoder.decode (чанк): '';

  const re = / \ n | \ r | \ r \ n / gm;
  пусть startIndex = 0;
  пусть результат;

  для (;;) {
    let result = re.exec (чанк);
    если (! результат) {
      if (readerDone) {
        перерыв;
      }
      пусть остаток = chunk.substr (startIndex);
      ({значение: кусок, готово: readerDone} = ожидание reader.read ());
      чанк = остаток + (чанк? utf8Decoder.decode (чанк): '');
      startIndex = re.lastIndex = 0;
      Продолжить;
    }
    yield chunk.substring (startIndex, result.показатель);
    startIndex = re.lastIndex;
  }
  if (startIndex  

Проверка успешности выборки

Обещание fetch () будет отклонено с TypeError при обнаружении сетевой ошибки или неправильной конфигурации CORS на стороне сервера, хотя обычно это означает проблемы с разрешениями или подобное - Например, 404 не является сетевой ошибкой.Точная проверка успешности fetch () будет включать проверку того, что обещание выполнено, а затем проверку того, что свойство Response.ok имеет значение true. Код будет выглядеть примерно так:

  fetch ('flowers.jpg')
  .then (response => {
    if (! response.ok) {
      выдать новую ошибку («Сетевой ответ не в порядке»);
    }
    вернуть response.blob ();
  })
  .then (myBlob => {
    myImage.src = URL.createObjectURL (myBlob);
  })
  .catch (error => {
    консоль.error ("Произошла проблема с вашей операцией выборки:", ошибка);
  });
  

Предоставление собственного объекта запроса

Вместо того, чтобы передавать путь к ресурсу, который вы хотите запросить, в вызове fetch () , вы можете создать объект запроса, используя конструктор Request () , и передать его в как аргумент метода fetch () :

  const myHeaders = новые заголовки ();

const myRequest = new Request ('flowers.jpg', {
  метод: 'GET',
  заголовки: myHeaders,
  режим: 'корс',
  кеш: 'по умолчанию',
});

выборка (myRequest)
  .затем (response => response.blob ())
  .then (myBlob => {
    myImage.src = URL.createObjectURL (myBlob);
  });
  

Request () принимает те же параметры, что и метод fetch () . Вы даже можете передать существующий объект запроса, чтобы создать его копию:

  const anotherRequest = новый запрос (myRequest, myInit);
  

Это очень полезно, поскольку тела запроса и ответа используются только для одного человека. Создание такой копии позволяет вам снова использовать запрос / ответ, при желании изменяя параметры init .Копия должна быть сделана до того, как будет прочитано тело, и чтение тела в копии также пометит его как прочитанное в исходном запросе.

Примечание: Существует также метод clone () , который создает копию. Оба метода создания копии завершатся ошибкой, если тело исходного запроса или ответа уже было прочитано, но чтение тела клонированного ответа или запроса не приведет к тому, что он будет помечен как прочитанный в оригинале.

Интерфейс Headers позволяет создавать собственные объекты заголовков с помощью конструктора Headers () .Объект заголовков - это простая мульти-карта имен и значений:

  const content = 'Hello World';
const myHeaders = новые заголовки ();
myHeaders.append ('Content-Type', 'текст / простой');
myHeaders.append ('Длина содержимого', content.length.toString ());
myHeaders.append ('X-Custom-Header', 'ProcessThisImmediately');
  

То же самое может быть достигнуто путем передачи в конструктор массива массивов или литерала объекта:

  const myHeaders = новые заголовки ({
  'Content-Type': 'текст / простой',
  Content-Length: контент.length.toString (),
  'X-Custom-Header': 'ProcessThisImmediately'
});
  

Можно запросить и получить содержимое:

  console.log (myHeaders.has ('Content-Type'));
console.log (myHeaders.has ('Set-Cookie'));
myHeaders.set ('Content-Type', 'текст / html');
myHeaders.append ('X-Custom-Header', 'Другое значение');

console.log (myHeaders.get ('Content-Length'));
console.log (myHeaders.get ('X-Custom-Header'));

myHeaders.delete ('X-Custom-Header');
console.log (myHeaders.get ('X-Custom-Header'));
  

Некоторые из этих операций полезны только в ServiceWorkers , но они предоставляют гораздо более удобный API для управления заголовками.

Все методы заголовков вызывают TypeError , если используется имя заголовка, которое не является допустимым именем заголовка HTTP. Операции мутации вызовут TypeError , если есть неизменяемый охранник (см. Ниже). В противном случае они тихо терпят неудачу. Например:

  const myResponse = Response.error ();
пытаться {
  myResponse.headers.set ('Источник', 'http://mybank.com');
} catch (e) {
  console.log («Не могу быть банком!»);
}
  

Хороший вариант использования заголовков - это проверка правильности типа содержимого перед его дальнейшей обработкой.Например:

  выборка (myRequest)
  .then (response => {
     const contentType = response.headers.get ('тип содержимого');
     if (! contentType ||! contentType.includes ('application / json')) {
       throw new TypeError («Ой, у нас нет JSON!»);
     }
     вернуть response.json ();
  })
  .then (data => {
      
  })
  .catch (ошибка => console.error (ошибка));
  

Guard

Поскольку заголовки могут быть отправлены в запросах и получены в ответах и ​​имеют различные ограничения на то, какая информация может и должна быть изменяемой, объекты заголовков имеют свойство guard .Это не отображается в Интернете, но влияет на то, какие операции изменения разрешены для объекта заголовков.

Возможные защитные значения:

• нет : по умолчанию.
• запрос : защита объекта заголовков, полученного из запроса ( Request.headers ).
• request-no-cors : защита объекта заголовков, полученного из запроса, созданного с помощью Request.mode no-cors .
• ответ : защита объекта заголовков, полученного из ответа ( Response.заголовки ).
• неизменяемый : защита, отображающая объект заголовков только для чтения; в основном используется для ServiceWorkers.

Примечание: Вы не можете добавлять или устанавливать заголовок Content-Length в объекте защищенных заголовков для ответа . Точно так же нельзя вставлять Set-Cookie в заголовок ответа: ServiceWorkers не могут устанавливать файлы cookie с помощью синтезированных ответов.

Как вы видели выше, экземпляров Response возвращаются, когда разрешены обещаний fetch () .

Наиболее часто используемые свойства ответа:

• Response.status - Целое число (значение по умолчанию 200), содержащее код состояния ответа.
• Response.statusText - Строка (значение по умолчанию ""), которая соответствует сообщению с кодом состояния HTTP. Обратите внимание, что HTTP / 2 не поддерживает сообщения о состоянии.
• Response.ok - использованный выше, это сокращение для проверки того, что статус находится в диапазоне 200–299 включительно.Это возвращает логическое значение.

Их также можно создавать программно с помощью JavaScript, но это действительно полезно только в ServiceWorkers , когда вы предоставляете собственный ответ на полученный запрос с помощью метода responseWith () :

  const myBody = новый Blob ();

addEventListener ('выборка', функция (событие) {
  
  event.respondWith (
    новый ответ (myBody, {
      заголовки: {'Content-Type': 'text / plain'}
    })
  );
});
  

Конструктор Response () принимает два необязательных аргумента - тело ответа и объект инициализации (аналогичный тому, который принимает Request () .)

Примечание: Статический метод error () возвращает ответ с ошибкой. Точно так же redirect () возвращает ответ, приводящий к перенаправлению на указанный URL. Они также актуальны только для обслуживающего персонала.

И запросы, и ответы могут содержать данные тела. Тело - это экземпляр любого из следующих типов:

Интерфейсы Request и Response используют следующие методы для извлечения тела. Все они возвращают обещание, которое в конечном итоге разрешается с фактическим содержанием.

Это делает использование нетекстовых данных намного проще, чем это было с XHR.

Тела запросов могут быть установлены путем передачи параметров тела:

  const form = new FormData (document.getElementById ('login-form'));
fetch ('/ login', {
  метод: 'POST',
  тело: форма
});
  

И запрос, и ответ (а также функция fetch () ) будут пытаться разумно определить тип контента. Запрос также автоматически установит заголовок Content-Type , если в словаре ничего не задано.

Для использования Fetch в неподдерживаемых браузерах доступен Fetch Polyfill, который воссоздает функциональность для неподдерживаемых браузеров.

Таблицы BCD загружаются только в браузере

Модальное окно · Bootstrap

Используйте модальный плагин Bootstrap для JavaScript, чтобы добавить на свой сайт диалоговые окна для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

Как это работает

Перед тем, как приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, так как параметры нашего меню недавно изменились.

• Модальные окна созданы с использованием HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и убирают прокрутку из , чтобы вместо этого прокручивалось модальное содержимое.
• Щелчок по модальному «фону» автоматически закрывает модальное окно.
• Bootstrap поддерживает только одно модальное окно за раз.Вложенные модальные окна не поддерживаются, так как мы считаем, что они неудобны для пользователей.

В модальных окнах

• используется позиция : фиксированная , которая иногда может быть немного специфичной при ее рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Скорее всего, вы столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
• Еще раз, из-за позиции : исправлено , есть некоторые предостережения при использовании модальных окон на мобильных устройствах.См. Дополнительную информацию в нашей документации по поддержке браузера.
• Из-за того, как HTML5 определяет свою семантику, атрибут autofocus HTML не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный код JavaScript:

  $ ('# myModal'). On ('shown.bs.modal', function () {
  $ ('# myInput'). trigger ('фокус')
})  

Продолжайте читать, чтобы увидеть демонстрации и инструкции по использованию.

Примеры

Модальные компоненты

Ниже приведен модальный пример static (это означает, что его позиция и display были переопределены).Включены модальный заголовок, модальное тело (требуется для padding ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставлять другое явное действие по отклонению.

Здесь находится модальный основной текст.

  

  

    

      

        
 Модальный заголовок 
        
           & times; 
        
      
      

        
 Здесь располагается модальный основной текст.
      
      

         Сохранить изменения 
         Закрыть 
      
    
  
  

Живая демонстрация

Переключите рабочую модальную демонстрацию, нажав кнопку ниже. Он будет скользить вниз и исчезать из верхней части страницы.

Woohoo, вы читаете этот текст в модальном окне!

Запустить демо-модальное окно

  

  Запустить демо-модальное окно




  

    

      

        
 Модальный заголовок 
        
           & times; 
        
      
      

        ...
      
      

         Закрыть 
         Сохранить изменения 
      
    
  
  

Прокрутка длинного содержимого

Когда модальные окна становятся слишком длинными для области просмотра или устройства пользователя, они прокручиваются независимо от самой страницы. Попробуйте демонстрацию ниже, чтобы понять, что мы имеем в виду.

Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Запустить демо-модальное окно

  

  Запустить демо-модальное окно




  

    

      

        
 Модальный заголовок 
        
           & times; 
        
      
      

        ...
      
      

         Закрыть 
         Сохранить изменения 
      
    
  
  

Вертикально по центру

Добавьте .modal-dialog-centered в .modal-dialog для вертикального центрирования модального окна.

Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Запустить демо-модальное окно

  

  Запустить демо-модальное окно




  

    

      

        
 Модальный заголовок 
        
           & times; 
        
      
      

        ...
      
      

         Закрыть 
         Сохранить изменения 
      
    
  
  

Всплывающие подсказки и всплывающие подсказки

Всплывающие подсказки и всплывающие окна могут быть размещены в модальных окнах по мере необходимости. Когда модальные окна закрываются, все всплывающие подсказки и всплывающие окна также автоматически закрываются.

Поповер в модальном

Эта кнопка вызывает всплывающее окно при нажатии.

Подсказки в модальном окне

Эта ссылка и эта ссылка имеют всплывающие подсказки при наведении курсора.

Запустить демо-модальное окно

  

  
 Всплывающее окно в модальном окне 
  
 Этот  button  вызывает всплывающее окно при нажатии. < / p>
  

  
 Подсказки в модальном окне 
  
  Эта ссылка  и  эта ссылка  имеют всплывающие подсказки при наведении курсора.
  

Использование сетки

Используйте сетку Bootstrap в модальном окне, вложив .container-fluid в .modal-body . Затем используйте обычные классы системы сетки, как и где бы то ни было.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-auto

.col-md-2.мл-авто

Уровень 1: .col-sm-9

Уровень 2: .col-8 .col-sm-6

Уровень 2: .col-4 .col-sm-6

Запустить демо-модальное окно

  

  

    

      
 .col-md-4 
      
.col-md-4 .ml-auto 
    
    

      
 .col-md-3 .ml-auto 
      
 .col-md-2 .ml-auto 
    
    

      
 .col-md-6 .ml-auto 
    
    

      

        Уровень 1: .col-sm-9
        

          

            Уровень 2: .col-8 .col-sm-6
          
          

            Уровень 2: .col-4 .col-sm-6
          
        
      
    
  
  

Изменяющееся модальное содержимое

У вас есть несколько кнопок, которые запускают одно и то же модальное окно с немного разным содержимым? Используйте событие .relatedTarget и атрибуты HTML data- * (возможно, через jQuery) для изменения содержимого модального окна в зависимости от того, какая кнопка была нажата.

Ниже представлена ​​живая демонстрация, за которой следуют примеры HTML и JavaScript. Для получения дополнительной информации прочтите документацию по модальным событиям для получения подробной информации о relatedTarget .

Открыть модальное окно для @mdo
Открыть модальное окно для @fat
Открыть модальное окно для @getbootstrap

   Открыть модальное окно для @mdo 
 Открыть модальный для @fat 
 Открыть модальное окно для @getbootstrap 


  

    

      

        
 Новое сообщение 
        
           & times; 
        
      
      

        <форма>
          

             Получатель: 
            
          
          

             Сообщение: 
             
          
        
      
      

         Закрыть 
         Отправить сообщение 
      
    
  
  

  $ ('# exampleModal').on ('show.bs.modal', функция (событие) {
  var button = $ (event.relatedTarget) // Кнопка, запускающая модальное окно
  var recipient = button.data ('Any') // Извлекаем информацию из атрибутов data- *
  // При необходимости вы можете инициировать здесь запрос AJAX (а затем выполнить обновление в обратном вызове).
  // Обновляем содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого вы можете использовать библиотеку привязки данных или другие методы.
  var modal = $ (это)
  modal.find ('. modal-title'). text ('Новое сообщение' + получателю)
  модальный.find ('. ввод модального тела'). val (получатель)
})  

Удалить анимацию

Для модальных окон, которые просто появляются, а не исчезают при отображении, удалите класс .fade из модальной разметки.

  

  ...
  

Динамическая высота

Если высота модального окна изменяется, пока он открыт, вы должны вызвать $ ('# myModal'). Modal ('handleUpdate') , чтобы скорректировать положение модального окна в случае появления полосы прокрутки.

Доступность

Не забудьте добавить role = "dialog" и aria-labelledby = "..." со ссылкой на модальный заголовок в .modal и role = "document" в .modal- сам диалог . Кроме того, вы можете дать описание вашего модального диалога с aria, описанным на .modal .

Встраивание видео с YouTube

Встраивание видео YouTube в модальные окна требует дополнительного JavaScript не в Bootstrap для автоматической остановки воспроизведения и т. Д.См. Этот полезный пост о переполнении стека для получения дополнительной информации.

Дополнительные размеры

Модальные окна имеют два дополнительных размера, доступных через классы модификаторов, которые помещаются в .modal-dialog . Эти размеры вступают в силу в определенных точках останова, чтобы избежать горизонтальных полос прокрутки на более узких окнах просмотра.

Большой модальный
Малый модальный

  
 Большой модальный 


  

    

      ...
    
  



 Маленький модальный 


  

    

      ...
    
  
  

Использование

Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript.Он также добавляет .modal-open к , чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop , чтобы предоставить область щелчка для отклонения показанных модальных окон при щелчке вне модального окна.

Через атрибуты данных

Активировать модальное окно без написания JavaScript. Установите data-toggle = "modal" на элементе контроллера, например кнопке, вместе с data-target = "# foo" или href = "# foo" , чтобы выбрать конкретный модальный элемент для переключения.

   Запуск модального окна   

Через JavaScript

Вызов модального окна с идентификатором myModal с помощью одной строки JavaScript:

  $ ('# myModal'). Modal (параметры)  

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , как в data-backdrop = "" .

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход . Они возвращаются к вызывающей стороне, как только начинается переход, но до его завершения . Кроме того, вызов метода для переходного компонента будет проигнорирован .

См. Нашу документацию по JavaScript для получения дополнительной информации.

.modal (опции)

Активирует ваш контент как модальный. Принимает необязательные параметры , объект .

  $ ('# myModal'). Modal ({
  клавиатура: ложь
})  

.modal ('toggle')

Переключает модальное окно вручную. Возврат к вызывающей стороне до того, как модальное окно было фактически показано или скрыто (т. Е. До того, как показано . Модальное окно или скрыто.bs.modal ).

  $ ('# myModal'). Modal ('toggle')  

.modal ('показать')

Открывает модальное окно вручную. Возврат к вызывающей стороне до фактического отображения модального окна (т.е. до того, как произойдет событие shown.bs.modal ).

  $ ('# myModal'). Modal ('показать')  

.modal ('скрыть')

Вручную скрывает модальное окно. Возврат к вызывающей стороне до того, как модальное окно было фактически скрыто (т.е.е. до того, как произойдет событие hidden.bs.modal ).

  $ ('# myModal'). Modal ('hide')  

.modal ('handleUpdate')

Вручную отрегулируйте положение модального окна, если высота модального окна изменяется, пока он открыт (например, в случае появления полосы прокрутки).

  $ ('# myModal'). Modal ('handleUpdate')  

.modal ('dispose')

Уничтожает модальное окно элемента.

События

Модальный класс

Bootstrap предоставляет несколько событий для подключения к модальным функциям.Все модальные события запускаются в самом модальном окне (то есть в