создание bootstrap модалов для динамически создаваемых кнопок

Question

Создана функция JavaScript для динамического создания и добавления кнопок. И назовите это кнопкой "+ Добавить новый куб" . При нажатии этой кнопки (+ Добавить новый куб) он динамически создает кнопки. При нажатии этой динамически созданной кнопки я хочу, чтобы отображался модальный ИЛИ div. Я ссылаюсь на учебник, который генерирует всплывающие окна, но, похоже, не помогает. может кто-нибудь помочь.

 var num = 1;
    function myFunction() {
      var btn = document.createElement("BUTTON");
      btn.innerHTML = "Cube "+num;
      btn.className = "sam";
      document.body.appendChild(btn);
      btn.onclick = function () {
        alert(this.innerHTML);
    }
      num++;
    }

   .sam{
        height:150px;
        width:100px;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button class = "btn btn-primary" onclick="myFunction()">+ Add New Cubicle</button><br/>

Answer 1

Проверьте этот фрагмент.

var num = 1;
    function myFunction() {
      var btn = document.createElement("BUTTON");
      btn.innerHTML = "Cube "+num;
      btn.className = "sam";
      btn.setAttribute("data-target","#myModal");
      btn.setAttribute("data-toggle","modal");
      document.body.appendChild(btn);
      btn.onclick = function () {
        //alert(this.innerHTML);
         $("#myModal .customMsg").html("Msg for "+ this.innerHTML);
         $("#myModal .modal-title").html(this.innerHTML)

      }

      num++;
   }

.sam{
    height:150px;
    width:100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  
<button class = "btn btn-primary" onclick="myFunction()">+ Add New Cubicle</button> 

 <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body customMsg">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

ОБНОВЛЕНИЕ

добавлен код для динамического задания тела модального всплывающего окна

Answer 2

Посмотрите этот пример с фрагментом, сейчас определено одиночное / общее модальное всплывающее окно, вы можете сделать его динамическим c в соответствии с вашими предпочтениями. Надеюсь, это поможет вам !!!

var num = 1;

function openModal(currentObj) {
  $("#myModal").find(".modal-title").text("Cube " + $(currentObj).attr("id"));
  $("#myModal").modal("show");
}

function myFunction() {
  var btn = document.createElement("BUTTON");
  btn.innerHTML = "Cube " + num;
  btn.className = "sam";
  btn.id = num;
  document.body.appendChild(btn);
  btn.onclick = function() {
    openModal(this);
  }
  num++
}

.sam {
  height: 150px;
  width: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<button class="btn btn-primary" onclick="myFunction()">+ Add New Cubicle</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>