如何将选中的URL变量传递到jQuery模态弹窗并显示

你的代码逻辑方向正确，但存在两处关键错误导致无法获取点击按钮的目标URL：

1. 获取数据时使用$('.vidurl')会选中所有带vidurl类的按钮，而非当前点击的按钮，应改用$(this)指代触发事件的元素。
2. data()方法的参数需为字符串格式，你写的videourl会被当作变量解析，需改为'videourl'。

修正后的JavaScript代码 #

$(document).ready(function(){
    $(".vidurl").click(function(){
        // 获取当前点击按钮的data-videourl属性值
        var vidurl = $(this).data('videourl');
        // 将URL写入模态框的span元素中
        $('.viddata').text(vidurl);
        console.log(vidurl);
    });
});

扩展：直接在模态框播放视频 #

若需求是播放视频而非仅显示URL，可将模态框内的<span class="viddata">替换为<video>标签，再动态设置视频源：

<div class="modal-body">
    <video controls width="100%" class="viddata">
        您的浏览器不支持视频播放
    </video>
</div>

对应JavaScript修改为：

$(document).ready(function(){
    $(".vidurl").click(function(){
        var vidurl = $(this).data('videourl');
        $('.viddata').attr('src', vidurl);
    });
});

更贴合Bootstrap的实现方式 #

Bootstrap模态框提供了show.bs.modal生命周期事件，可直接监听该事件更新内容，无需单独绑定按钮点击事件：

$(document).ready(function(){
    $('#modal-default').on('show.bs.modal', function(event) {
        // 获取触发模态框的按钮
        var button = $(event.relatedTarget);
        var vidurl = button.data('videourl');
        // 更新模态框内容
        $(this).find('.viddata').text(vidurl);
    });
});

内容的提问来源于stack exchange，提问作者Jayreis