如何在动态模态

时间:2017-11-21 08:40:45

标签: javascript jquery twitter-bootstrap video

我想在动态模式中显示一个装备视频,但我的代码不起作用。

我的动态模态代码

var html = '' +
    '<div class="modal fade" id="Modal' + id + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
    '   <div class="modal-dialog modal-lg"> ' +
    '       <div class="modal-content"> ' +
    '           <div class="modal-header">' +
    '               <div class="col-md-1 left">' +
    '                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="float: left">' +
    '                       <i class="material-icons">clear</i>' +
    '                   </button>' +
    '               </div>' +
    '               <div class="col-md-11">' +
    '                   <h4 class="modal-title right text-right">' + title + '</h4>' +
    '               </div>' +
    '           </div>' +
    '           <div class="modal-body">' + 
    '               <div class="row">' +
    '                   <div class="col-md-6">' +
    '                       ' + video +
    '                   </div>' +
    '                   <div class="col-md-6">' +
    '                       <div class="row">' + 
    '                           <h4 class="text-right" style="padding: 10px">' + about + '</h4>' +
    '                       </div>' +
    '                   </div>' +
    '               </div>' + 
    '               <div class="row">' + 
    '                   <div class="row text-right">' +
    '                       <div class="col-md-10">' +
    '                       </div>' +
    '                       <div class="col-md-2">' +
    '                           <h3>روزومه</h3>' +
    '                       </div>' +
    '                   </div>' +
    '                   <div class="row">' +
    '                       <div class="col-md-2">' +
    '                       </div>' +
    '                       <div class="col-md-10 text-right right">' +
    '                           ' + rezomeh +
    '                       </div>' +
    '                   </div>' +
    '               </div>' +
    '           </div>' +
    '           <div class="modal-footer">' +
    '               <button type="button" class="btn btn-default btn-primary">' +
    '                   <b>نمایش کامل مشخصات</b>' +
    '               </button>' +
    '           </div>' +
    '       </div>' +
    '   </div>' +
    '</div>';
document.getElementById("show_modal").innerHTML = "";
document.getElementById("show_modal").innerHTML = html;
var modal_id = "#Modal" + id;
$(modal_id).modal();

我的视频内容是

<div id="15112483129479291"><script type="text/JavaScript" src="https://www.aparat.com/embed/OVHv9?data[rnddiv]=15112483129479291&data[responsive]=yes"></script></div>

结果:视频div为空

1 个答案:

答案 0 :(得分:0)

如果您使用的是较旧的浏览器,请使用video代码或iframe。

视频标记:

var video = '<div id="15112483129479291"> +
'<video width="320" height="240" controls>'+
'<source src="movie.mp4" type="video/mp4">' +
 </video>';