bootstrap模态框视频，图片，页面

时间：2021-05-11 17:05:16 阅读：27 评论：0 收藏：0 [点我收藏+]

bootstarp模态框放大，播放视频，放大图片，内页面

效果：

技术分享图片

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<div class="container my-4">

    <h3 class="mb-4">Bootstrap 4 Modal YouTube Videos, Images & Pages</h3>

    <a href="javascript:;" class="btn btn-primary" data-modal data-video="zpOULjyy-n8" data-title="Video Title" data-size="xl">Video</a>

    <a href="javascript:;" class="btn btn-primary" data-modal data-image="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-social-logo.png" data-title="Image Title" data-size="">Image</a>

    <a href="javascript:;" class="btn btn-primary" data-modal data-page="https://getbootstrap.com" data-title="Page Title" data-size="lg">Page *</a>

    <p class="mt-4">* Clicking this will break it, but it‘ll work using a local page!</p>

</div>

<div class="modal fade" id="quickview" tabindex="-1" role="dialog" aria-labelledby="quickview" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>
</body>
<script>
    $(‘a[data-modal]‘).on(‘click‘,function(){
        var $page = $(this).data(‘page‘);
        var $image = $(this).data(‘image‘);
        var $video = $(this).data(‘video‘);
        var $title = $(this).data(‘title‘);
        var $size = $(this).data(‘size‘);
        $(‘#quickview .modal-title‘).text($title);
        if ($size) { $(‘#quickview .modal-dialog‘).addClass(‘modal-‘+$size); }
        if ($image) {
            $(‘#quickview .modal-body‘).html(‘<div class="text-center"><img class="img-fluid" src="‘+$image+‘" alt="‘+$title+‘"></div>‘);
        } else if ($video) {
            $(‘#quickview .modal-body‘).html(‘<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/‘+$video+‘?autoplay=1" allowfullscreen></iframe></div>‘);
        }
        if ($page) {
            $(‘#quickview .modal-body‘).load($page,function(){
                $(‘#quickview‘).modal({show:true});
            });
        } else {
            $(‘#quickview‘).modal({show:true});
        }
        $(‘#quickview‘).on(‘hidden.bs.modal‘, function(){
            $(‘#quickview .modal-title‘).text(‘‘);
            $(‘#quickview .modal-body‘).html(‘‘);
            if ($size) { $(‘#quickview .modal-dialog‘).removeClass(‘modal-‘+$size); }
        });
    });
</script>

</html>

参考：https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal

bootstrap中文网：https://v3.bootcss.com/javascript/#modals-sizes

bootstrap模态框视频，图片，页面

原文：https://www.cnblogs.com/liran123/p/14755623.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)