想要在模式/弹出窗口中添加十字图标或关闭按钮以关闭模式

时间:2018-11-27 06:08:42

标签: javascript html css bootstrap-modal

这是我的代码:-

<button type="button" class="popupvideo" data-toggle="modal" data-target="#myModal"></button>

<!-- The Modal -->

<div class="modal fade" id="myModal" role="dialog" >
<!-- Modal body -->
  <button type="button"><iframe width="560" height="315" src="https://www.youtube.com/" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></button>
  <a title="Close"><i ng-click="CloseModal()" class="glyphicon glyphicon-remove icon-arrow-right pull-right"></i></a>    
</div>

我也添加了这个

<button type="button" class="btn btn-danger" data-dismiss="modal"></button>

但是它显示在模态之外。

1 个答案:

答案 0 :(得分:-1)

      <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<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">
       <iframe width="560" height="315" src="https://www.youtube.com/" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>