在 <a> 标记中指定 jQuery 对话框的高度和宽度答案

【问题标题】：Specifying height and width for jQuery dialog box in <a> tag在 <a> 标记中指定 jQuery 对话框的高度和宽度
【发布时间】：2011-07-18 16:32:19
【问题描述】：

我在 jQuery 对话框 (http://jqueryui.com/demos/dialog/) 中显示一个 iframe（其中包含视频）。我想展示两种尺寸的视频。所以，我想让对话框提供不同的高度和宽度规格。取决于点击页面上的哪个链接。

使对话框弹出的函数位于创建 HTML 头的 php 文件中。那就是……

  jQuery(document).ready(function() {
        jQuery("a.videobox").click(function(e) {
            e.preventDefault();
            var d = jQuery('<iframe src="' + this.href + '" />');
            d.dialog({
                title: this.title,  // allow video title to be specified like this: '<a href="..." title="..." ...'
                autoOpen: true,
                width: 800,
                height: 600,
                modal: true,
                resizable: true,
                autoResize: true,
                show: 'blind',
                hide: 'explode',
                open: function(event, ui) { jQuery('.ui-icon-closethick').html(''); }  // remove the 'close' caption that overlaps with 'x' button
            }).width("100%");
        });
    });


jQuery(document).ready(function() {
        jQuery("a.videobox_smaller").click(function(e) {
            e.preventDefault();
            var d = jQuery('<iframe src="' + this.href + '" />');
            d.dialog({
                title: this.title,  // allow video title to be specified like this: '<a href="..." title="..." ...'
                autoOpen: true,
                width: 500,
                height: 300,
                modal: true,
                resizable: true,
                autoResize: true,
                show: 'blind',
                hide: 'explode',
                open: function(event, ui) { jQuery('.ui-icon-closethick').html(''); }  // remove the 'close' caption that overlaps with 'x' button
            }).width("100%");
        });
    });

所以，我在想……

<a title="Bigger Size" href="bigger_video.html" class="videobox">Play the Bigger Video</a>

还有……

<a title="Smaller Size" href="smaller_video.html" class="videobox_smaller">Play the Smaller Video</a>

但是在点击后，类会根据点击的链接来设置。

我对javascript一无所知，所以我不知道如何去做。我也不知道我建议的解决方案是否可行，但它不起作用。

想法？谢谢。

【问题讨论】：

这应该可以正常工作。你包括jquery-ui吗？
是的，我的头部包含 jquery-ui。有两个“jQuery(document).ready(function()”可以吗？
您可以将jQuery("a.videobox").click() 和jQuery("a.videobox_smaller").click() 合并到一个jQuery(document).ready() 下
给我们您的videobox 和videobox_smaller css 规则。

标签： jquery dialog css

【解决方案1】：

从样式列表创建对话框值，将样式包含在类定义中

（即class="video:sm"）

<a href="foo.html" class="video:sm">small video</a>
<a href="bar.html" class="video:lg">large video</a>
<script>
(function($){
    var dialogStyles = {
        sm:{height:500,width:300},
        lg:{height:1200,width:800},
        sm_nomodal:{height:500,width:300,modal:false},
        lg_nomodal:{height:1200,width:800,modal:false}
    }
    $('[class*="video:"]').each(function(){
        var type = $(this).attr("class").match(/video:([-\w]+)/)[1];
        $(this).click(function(){
            var defaults = {
                title:$(this).attr("title"),
                autoOpen: true,
                width: 400,
                height: 400,
                modal: true,
                resizable: true,
                autoResize: true,
                show: 'blind',
                hide: 'explode',
                open: function(event, ui) { $('.ui-icon-closethick').html(''); }
            }
            var o = $.extend(defaults,dialogStyles[type]);
            // im trusting your open dialog code
            $('<iframe src="' + $(this).attr("href") + '" />').dialog(o);
            return false;
        }); 
    });
})(jQuery)
</script>

你可以把它写下来，但我把它写得很冗长：)

【讨论】：