Question

我是jQuery的新手，我正在尝试使用对话框功能。当我查看jquery.ui提供的demo（animated.html）时，我试图在对话框中插入一个巨大的图像。

插入以下代码时效果很好，它限制了对话框的大小。

但是，当我从演示中删除样式表（jquery.ui.all.css和demos.css）ref时，对话框现在不受限制，并在对话框中显示没有滚动条的整个图像。（因此父母现在包含滚动条，这是不利的）

样式表中的哪个主题可以设置对话框的大小？

第一次：

<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-fade.js"></script>
<script src="../../ui/jquery.ui.effect-explode.js"></script>
<link rel="stylesheet" href="../demos.css">

<script>
$(function() {
   $( "#dialog" ).dialog({
    autoOpen: false,
    show: {
  effect: "fade",
  duration: 1000
        },
    hide: {
  effect: "explode",
      duration: 1000
     },
    maxWidth:400,
    maxHeight: 300,
    width: 400,
    height: 300,

});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
});
</script>

第二次：

<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-fade.js"></script>
<script src="../../ui/jquery.ui.effect-explode.js"></script>

<script>
$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: {
            effect: "fade",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
              maxWidth:400,
    maxHeight: 300,
    width: 400,
    height: 300,
    overflow: 'auto',
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
    });
});
</script>

在对话框中设置高度和宽度不起作用

0 个答案: