Диалоговые окна в Javascript и Bootstrap

232

21 сентября 2017, 17:49

Доброго дня. Через Bootstrap сделал вывод диалогового окна.

 <div id="myModalBox" class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-body">
Сам контент!!! </div></div></div></div>

При определённом условии отображаю его:

$(document).ready(function() 
 {
  var content = '<audio src="site.com/audio.mp3" autoplay"></audio>';
  $("#myModalBox").modal('show');
 });

Каким образом в это диалоговое окно можно передать для отображение содержимое переменной content?

Answer 1

$(document).ready(function(){ 
//if(){ Условие 
var new_html =  '<audio src="site.com/audio.mp3" autoplay"></audio>'; 
    $("#myModalBox .modal-body").html(new_html); 
//} 
 
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="myModalBox" class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"> 
Сам контент!!! </div></div></div></div>

Answer 2

$(document).ready(function() { 
  var content = '<span>One, two, three</span>'; 
  $('#myModalBox').on('show.bs.modal', function(e) { 
    $(this).find(".modal-body").html(content); 
  }); 
  $("#myModalBox").modal('show'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="myModalBox" class="modal fade"> 
  <div class="modal-dialog"> 
    <div class="modal-content"> 
      <div class="modal-body"> 
        Сам контент!!! </div> 
    </div> 
  </div> 
</div>