Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2020, 12:33
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 440

Bootstrap. Модальное окно
Привет. Хочу использовать одно модальное окно для разного содержимого. Первое открываю при помощи data атрибутов в кнопке. А второе при помощи js и вставляю в тело окна нужные значения.
$('#myform').on('click', function(ev) {

$("#ModBalance").modal('show');
$(".modal .modal-body").toggleClass("hidden").html(...);
});

Но если я открыл окно через js, потом закрыл его и открываю через html, то содержимое окна остаётся js. Если перезагружусь, то соответственно,открываетс что надо. Можно конечно на кнопку закрытия модального окна (js) повесить location.reload(), но как то не хочется. Может можно как то по другому решить?
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2020, 12:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,272

Сообщение от ureech
я открыл окно через js, потом закрыл его и открываю через html, то содержимое окна остаётся js.
что мешает вернуть прежнее значение?
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2020, 13:03
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 440

Сообщение от рони
что мешает вернуть прежнее значение?
Осутствие знания). Пробовал использовать empty(), html(''),hide() но тогда и у второго окна всё пропадает. А заменять,не вариант. Большой код.
Ответить с цитированием
  #4 (permalink)  
Старый 24.10.2020, 13:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,272

ureech,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
  <script>
$(function() {
let html = $('.modal-body').html();
$('#exampleModal').on('shown.bs.modal', function (event) {
  let btn = event.relatedTarget;
  let content = $(btn).data('content') || html;
  $('.modal-body').html(content);
})
});
  </script>
</head>

<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Запустить модальное окно
</button>

<!-- Modal -->
<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">
        ...content
      </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>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-content="12345" >
  Запустить модальное окно 12345
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-content="00000" >
  Запустить модальное окно 00000
</button>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 24.10.2020, 13:32
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 440

То есть мне придётся содержимое modal-body вставить в data-content?
Ответить с цитированием
  #6 (permalink)  
Старый 24.10.2020, 13:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,272

ureech,
или так ...
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
    <script>
$(function() {
let html = $('.modal-body').html();
$('#exampleModal').on('hidden.bs.modal', function (event) {
    $('.modal-body').html(html);
})
$('[data-content]').on('click', function () {
    $('.modal-body').html(this.dataset.content);
})
});
    </script>
</head>

<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Запустить модальное окно
</button>

<!-- Modal -->
<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">
                ...content
            </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>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-content="12345" >
    Запустить модальное окно 12345
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-content="00000" >
    Запустить модальное окно 00000
</button>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 24.10.2020, 13:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,272

Сообщение от ureech
То есть мне придётся содержимое modal-body вставить в data-content?
да, если большое содержимое, то лучше хранить ключ в data-content, а где иметь объект с содержимым.
Ответить с цитированием
  #8 (permalink)  
Старый 24.10.2020, 13:41
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 440

Ок. Всё понятно. Спасибо. Работает).
Ответить с цитированием
  #9 (permalink)  
Старый 24.10.2020, 13:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,272

Сообщение от рони
хранить ключ в data-content,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
    <script>
$(function() {
let html = $('.modal-body').html();
$('#exampleModal').on('hidden.bs.modal', function (event) {
    $('.modal-body').html(html);
})
let data = {
txt : "12345",
key : "00000"
};
$('[data-content]').on('click', function () {
    let key = this.dataset.content;
    $('.modal-body').html(data[key]);
})
});
    </script>
</head>

<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Запустить модальное окно
</button>

<!-- Modal -->
<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">
                ...content
            </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>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-content="txt" >
    Запустить модальное окно 12345
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-content="key" >
    Запустить модальное окно 00000
</button>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно. Salvat Элементы интерфейса 4 25.02.2016 09:33
typeahead bootstrap 3 + bootstrap модальное окно velllum Ваши сайты и скрипты 2 19.10.2015 20:34
Bootstrap как закрыть модальное окно Witold Events/DOM/Window 2 17.05.2015 19:50
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 12:27
bootstrap модальное окно гуня (X)HTML/CSS 1 03.04.2013 09:28