1

Господа,

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

У меня есть пример создания модального окна. Это не первый пример, который я нашел, но первый, который работает так, как мне и надо: 1) окно располагаются поверх всего документа 2) Клик вне модального элемента автоматически закрывает его

Ниже - сам пример: (полный код html - старницы, со всеми подключенными библиотеками)

А вот что мне нужно: пример работает при нажатии на bootstrap - овскую кнопку. А я хочу кнопку убрать, а окно показывать из javascript.

У bootstrap - кнопки я вижу два свойства - data-toggle="modal" data-target="#exampleModal", которые, видимо, и влияют на показ этой кнопки. Но как их активировать из js?

Спасибо большое за подсказки

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>modal dialog example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css.css">
</head>

<body>

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

  <a href="#" onclick="show_modal();">Открыть модальное окно средствами js</a>


  <!-- 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">
          ...
        </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>





  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script>
    function show_modal() {
      // вот здесь я хотел бы показать модальный диалог программно
    }
  </script>

</body>

</html>

2 ответа 2

1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>modal dialog example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css.css">
</head>

<body>

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

  <a href="#" onclick="show_modal();">Открыть модальное окно средствами js</a>


  <!-- 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">
          ...
        </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>





  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script>
    function show_modal() {
      // вот здесь я хотел бы показать модальный диалог программно
      document.querySelector('[data-target="#exampleModal"]').click();
    }
  </script>

</body>

</html>

1
  • Большое спасибо! А можно попросить одно небольшое уточнение: Ваш код document.querySelector('[data-target="#exampleModal"]').click(); прекрансо работает, когда у меня ЕСТЬ на странице bootstrap - кнопка. Но на том сайте, на котором я хочу использовать этот пример, этой кнопки нет - окно должно показываться только из JS. Нельзя ли то же самое сделать без bootstrap - кнопки?
    – S.H.
    3 фев 2021 в 21:56
0

Всё таки, несмотря на советы, мне не удалось заставить работать показ модального окна из JS.

После некотрых поисков я нашел вот такое решение. Его единственный недостаток - клик вне модального окна его не закрывает.

Я прошу прощения, но мне понравился подход, который используется в этой библиотеке: вместо возни с разными CSS свойствами я могу работать с объектами типа "окно" или "кнопка" почти так же легко, как в windows.

Код получается крайне простой и императивный.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/jsframe.js/lib/jsframe.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>
    <body>
        <a href="#" onclick="show_modal();">Показть модальное окно</a>

    <script>

    
    //Show as a modal window
    function show_modal(){
        const jsFrame = new JSFrame();

        const innerHTML = '<div>' +
        '<h4>Content of modal window. For example, a message</h4>' +
        '</div>'

        const modalFrame = jsFrame.create({
            title: 'modal window',
            left: 100, top: 100, width: 320, height: 220,
            html: innerHTML
        });

        modalFrame.showModal(_frame => {
            _frame.closeFrame();
        });
    }

    </script>
    </body>
    </html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.