Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Bootstrap. Модальное окно (https://javascript.ru/forum/events/81227-bootstrap-modalnoe-okno.html)

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

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

Но если я открыл окно через js, потом закрыл его и открываю через html, то содержимое окна остаётся js. Если перезагружусь, то соответственно,открываетс что надо. Можно конечно на кнопку закрытия модального окна (js) повесить location.reload(), но как то не хочется. Может можно как то по другому решить?

рони 24.10.2020 11:46
Цитата:
Сообщение от ureech
я открыл окно через js, потом закрыл его и открываю через html, то содержимое окна остаётся js.
что мешает вернуть прежнее значение?

ureech 24.10.2020 12:03
Цитата:
Сообщение от рони
что мешает вернуть прежнее значение?
Осутствие знания). Пробовал использовать empty(), html(''),hide() но тогда и у второго окна всё пропадает. А заменять,не вариант. Большой код.

рони 24.10.2020 12:17
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>

ureech 24.10.2020 12:32
То есть мне придётся содержимое modal-body вставить в data-content?

рони 24.10.2020 12:38
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>

рони 24.10.2020 12:40
Цитата:
Сообщение от ureech
То есть мне придётся содержимое modal-body вставить в data-content?
да, если большое содержимое, то лучше хранить ключ в data-content, а где иметь объект с содержимым.

ureech 24.10.2020 12:41
Ок. Всё понятно. Спасибо. Работает).

рони 24.10.2020 12:43
Цитата:
Сообщение от рони
хранить ключ в 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>


Часовой пояс GMT +3, время: 18:54.