Как переместить дочерний элемент из родительского элемента в HTML?

У меня есть элемент на моей HTML-странице, чтобы открыть модальное окно начальной загрузки. У меня также есть кнопка внутри модального элемента запуска, чтобы показать предупреждение после нажатия. Проблема в том, что после нажатия на кнопку появляется предупреждение и открывается модальное окно после его закрытия. Мне нужно получить функциональность модального запуска с кнопки, пока она все еще находится внутри модального блока запуска, чтобы я мог отдельно щелкнуть кнопку внешнего лизания. Я думаю, если бы я мог получить кнопку вперед от div, например, изменить z-индекс, это было бы решено, но я понятия не имею, как это сделать.

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>

<!-- Button trigger modal -->
<div type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalCenter">
  Launch demo modal
  <button onclick = "alert('clicked!');">External click</button>
</div>

<!-- Modal -->
<div class = "modal fade" id = "exampleModalCenter" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalCenterTitle" aria-hidden = "true">
  <div class = "modal-dialog modal-dialog-centered" role = "document">
    <div class = "modal-content">
      <div class = "modal-header">
        <h5 class = "modal-title" id = "exampleModalLongTitle">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>

Итак, вы хотите, чтобы модальное окно отображалось до того, как предупреждение заблокирует пользовательский интерфейс? Самым простым решением для этого, вероятно, было бы заключить предупреждение в тайм-аут.

— 08.04.2019 10:50

@04FS Мне нужно предотвратить открытие мода при нажатии на кнопку «Внешний клик».

— 08.04.2019 10:54

javascript html css

08.04.2019 10:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это. Надеюсь, поможет

$('#btn').click(function(e) {
  e.preventDefault();
  alert('clicked!');
  return false;
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>

<!-- Button trigger modal -->
<div type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalCenter">
  Launch demo modal
  <button id = "btn">External click</button>
</div>

<!-- Modal -->
<div class = "modal fade" id = "exampleModalCenter" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalCenterTitle" aria-hidden = "true">
  <div class = "modal-dialog modal-dialog-centered" role = "document">
    <div class = "modal-content">
      <div class = "modal-header">
        <h5 class = "modal-title" id = "exampleModalLongTitle">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>

08.04.2019 11:09

Другие вопросы по теме

Функция вызова после перезагрузки окна с помощью той же кнопки

Как сделать, чтобы фон НЕМНОГО выцветал сверху и снизу?

Передайте это и значение, разделенное запятыми, в качестве аргументов функции

Предотвращение обновления Jquery QueryBuilder после вызова getRules

CSS GRID: добавлен разрыв между строками и столбцами по умолчанию

Html5 javascript gettime() from <input type="date" />, как ни странно работает

Флажок материала не установлен, даже если значение модели верно

Остановить добавление точек в полигон с помощью openlayers 5.3.0

Как связать кнопку с другим html-файлом (в HTML)

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

Как переместить дочерний элемент из родительского элемента в HTML?

Ответы 1

Другие вопросы по теме

Похожие вопросы