Jquery 引导模式弹出窗口关闭时不删除显示的内容_Jquery_Twitter Bootstrap

Jquery 引导模式弹出窗口关闭时不删除显示的内容

jquery twitter-bootstrap

Jquery 引导模式弹出窗口关闭时不删除显示的内容,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,我在Bootstraps 3模式视图中显示php服务器端的动态内容。当我显示第一个动态内容并关闭模式时。显示的数据不会被删除如果我点击第二个按钮，第二个模式按钮。在动态数据2的新内容中，我仍将看到以前显示的数据每次单击模式按钮时，它都会在模式中添加新内容每次关闭模式按钮时，我需要删除所有显示的动态内容我在这里尝试了以下解决方案： $（文档）.ready（函数（）{ $（“#myModal_video”）.on（'hidden.bs.modal'，函数（）{ $（this.data（'b

我在Bootstraps 3模式视图中显示php服务器端的动态内容。当我显示第一个动态内容并关闭模式时。显示的数据不会被删除

如果我点击第二个按钮，第二个模式按钮。在动态数据2的新内容中，我仍将看到以前显示的数据

每次单击模式按钮时，它都会在模式中添加新内容

每次关闭模式按钮时，我需要删除所有显示的动态内容

我在这里尝试了以下解决方案：


$（文档）.ready（函数（）{
$（“#myModal_video”）.on（'hidden.bs.modal'，函数（）{
$（this.data（'bs.model'，null）；
});
});

下面是整个代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

  <script type="text/javascript">
  $(document).ready(function(){
    $("#modal").on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null);
    });
  });
  </script>

  <script>
  $(document).ready(function(){
    $(".myModalink_video").click(function(){

      var rec_uid = $(this).attr("id");
      $('#loader_video').fadeIn(400).html('<span class="alerts alert-info"><img src="loader.gif" align="absmiddle"> Please Wait,Video is Loading.....</span>');

      $.ajax({
        type: 'POST',
        url: 'video.php',
        data: { rec_uid: rec_uid},
        success: function (data) {
          $('#loader_video').hide();
          $('#alertbox_video').fadeIn('slow').prepend(data);
        }
      });
    })
  });
  </script>

  <button id="89" data-toggle="modal" data-target="#myModal_video" class="btn btn-default myModalink_video">View Youtube Videos 1</button><br>
  <button id="90" data-toggle="modal" data-target="#myModal_video" class="btn btn-default myModalink_video">View Youtube Videos 2</button><br>

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

      <!-- Modal content-->
      <div  class="modal-content">
        <div style="background:#3B5998;color:white" class="modal-header">
          <button type="button" class="pull-right btn btn-danger" data-dismiss="modal" style="color:white">Close</button>
          <h4 class="modal-title">Hi Welcome</h4>
        </div>
        <div  class="modal-body">
          <!--display dynamic content Starts-->

          <h3>Propertises video</h3>

          <div id="loader_video"></div>
          <div id="alertbox_video"></div>

          <!-- Ends-->
        </div>
        <div style="20%" class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
        </div>
      </div>
    </div>
  </div>

</body>
</html>


$（文档）.ready（函数（）{
$（“#modal”）.on（'hidden.bs.modal'，function（）{
$（this.data（'bs.model'，null）；
});
});
$（文档）.ready（函数（）{
$（“.myModalink_视频”）。单击（函数（）{
var rec_uid=$（this.attr（“id”）；
$（'#loader_video'）.fadeIn（400）.html（'请稍候，正在加载视频…'）；
$.ajax({
键入：“POST”，
url:'video.php'，
数据：{rec_uid:rec_uid}，
成功：功能（数据）{
$（“#加载程序_视频”）.hide（）；
$（'#alertbox_video'）.fadeIn（'slow'）.prepend（数据）；
}
});
})
});
查看Youtube视频1

查看Youtube视频2

接近
欢迎光临
房地产视频
取消/关闭

video.php

<?php
$rec_uid = $_POST['rec_uid'];
?>

<?php
if($rec_uid =='89'){
  ?>
  Video 1:<br>
  <iframe id="yVideo" width="420" height="315" src="https://www.youtube.com/embed/hiHpzhyG6x4"></iframe>
  <?php
}
?>

<?php
if($rec_uid =='90'){
  ?>
  Video 2: <br>
  <iframe id="yVideo" width="420" height="315" src="https://www.youtube.com/embed/xv6l1vOUZTg"></iframe>
  <?php
}
?>

<br>
<br>


视频1:

视频2:

Ajax请求在

$（“#alertbox_video”）中预先添加内容。

因此，如果您想在关闭时删除该内容，我建议您使用该方法

<?php
$rec_uid = $_POST['rec_uid'];
?>

<?php
if($rec_uid =='89'){
  ?>
  Video 1:<br>
  <iframe id="yVideo" width="420" height="315" src="https://www.youtube.com/embed/hiHpzhyG6x4"></iframe>
  <?php
}
?>

<?php
if($rec_uid =='90'){
  ?>
  Video 2: <br>
  <iframe id="yVideo" width="420" height="315" src="https://www.youtube.com/embed/xv6l1vOUZTg"></iframe>
  <?php
}
?>

<br>
<br>

$(document).ready(function(){
  $("#myModal_video").on('hidden.bs.modal', function () {
    $('#alertbox_video').empty();
  });
});