Question

我目前正在尝试使用Bootstrap来获取可调整大小的模态，我可以移动它。到目前为止，我得到了两个工作，但我有一个扩展问题。如果我通过单击并拖动缩放图标使模态更小并仅在一个轴上缩放它，则视频将退出模态。那么我如何确保模态接收视频元素的当前高度并将其应用于它自己的高度？使用jquery或CSS有一种简单的方法吗？

https://jsfiddle.net/pdh4cmuf/23/

$('.modal-content').resizable({
    //alsoResize: ".modal-dialog",
    minHeight: 150,
    minWidth: 200
});
$('.modal-dialog').draggable();

$('#myModal').on('show.bs.modal', function () {

    $(this).find('.modal-body').css({
        'max-height':'100%'
    });

});
 $('.modal-backdrop').removeClass("modal-backdrop");    



$(window).load(function () {
            $('#myModal').modal({ backdrop: 'static', keyboard: false});
            $('#myModal').modal('show');
        });

function myFunction() {
            $('#myModal').modal('toggle');
            window.alert('Hello');
        }

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

      </div>
      <div class="modal-body">
       <object class="embed-responsive-item">
<video controls>
    <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    <p>Your browser does not support H.264/MP4.</p>
</video>
</object>
    </div>
  </div>
</div>


.modal {
  pointer-events: none;
  }
.modal-backdrop {
  display: none;
  }

.vertical-alignment-helper {
            display:table;
            height: 100%;
            width: 100%;
            pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
        }
        .vertical-align-center {
            /* To center vertically */
            display: table-cell;
            vertical-align: middle;
            pointer-events:none;
        }
        .modal-content {

            margin: 0 auto;
            pointer-events: all;
            float: left;

            background-color: #ffffff;
        }
        .textarea-nonresizable {
            height: 10em;
            border-radius: 1em;
            resize: none; /* prevents the user-resizing, adjust to taste */
        }
video {
  width: 100%;
  height: auto!important;
}

Answer 1

您可以使用更新的小提琴https://jsfiddle.net/pdh4cmuf/26/

**Updated JS**
$('.modal-content').resizable({
    alsoResize: "#video",
    minHeight: 150,
    minWidth: 200
}).bind({
    resizestop: function(event, ui){

        $('video').css({
            'height':ui.size.height - 60,
            'width': ui.size.width - 30
        });
    }
});

-60＆amp; -30是要从计算的高度和距离中移除的填充。宽度分别。

在缩放时将视频元素的大小应用于引导模式

1 个答案: