无法将 jQuery 对话框设置为宽度 < 150px答案

【问题标题】：Can't set jQuery dialog to width < 150px无法将 jQuery 对话框设置为宽度 < 150px
【发布时间】：2015-01-23 20:29:52
【问题描述】：

我似乎无法将 jQuery 对话框的宽度设置为小于 150 像素。换句话说，如果我把它设置得更小，它仍然会以 150px 显示。

对话调用：

$('#menu').dialog({modal:false, height:window.innerHeight-20, width:125,dialogClass: "no-close", position: { my: "right bottom", at: "右下角", of: window }});

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
        <script language="javascript">
            var menuOpen=false;
            function toggleFunctionMenu()
            {
                if(!menuOpen)
                {
                    $('#menu').dialog({modal:false, height:window.innerHeight-30, width:125,dialogClass: "no-close", position: { my: "right bottom", at: "right bottom", of: window }});
                    $('#menuButton').html("Close");
                    menuOpen=true;
                }
                else
                {
                    $('#menu').dialog("close");
                    $('#menuButton').html("Open");
                    menuOpen=false;
                }
            }


        </script>
        <style type="text/css">
            #menu
            {
                display: none;
                background-color: yellow;
                width:100%;
                height:100%;
                border-style:solid;
                border-width: 1px;
                border-color:black;
                
            }

              #menuButton
              {
                  float:right;
              }
        </style>
    </head>
    <body>
        <button onclick="toggleFunctionMenu()" id="menuButton">Open</button>
        <div id="menu">
        </div>
    </body>
</html>

【问题讨论】：

您注意到您的其他 CSS 也无法正常工作吗？ height 属性是 auto 而不是计算值。
这听起来像是 jQuery UI 中的一个错误，因为即使是文档也不使用引号 => api.jqueryui.com/dialog/#option-width
PlantThelda 实际上的高度是有效的。尝试将其更改为某个值（例如 200）。
不在你的代码 sn-p 它没有...检查元素显示它设置为height:auto 用于对话框。
哦..呵呵。你是对的，它确实“说”自动 - 但仍然显示为我设置的内容。奇怪的。对那个文档很感兴趣。

标签： jquery dialog width jquery-ui-dialog

【解决方案1】：

<!DOCTYPE html>
<html>
    <head>
     <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <style type="text/css">
            #menu
            {
                display: none;
                background-color: yellow;
                width:100%;
                height:100%;
                border-style:solid;
                border-width: 1px;
                border-color:black;

            }

              #menuButton
              {
                  float:right;
              }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
        <script language="javascript">
            var menuOpen=false;
            function toggleFunctionMenu()
            {
                if(!menuOpen)
                {
                    $('#menu').dialog({modal:false, height:window.innerHeight-30, width:'25px',dialogClass: "no-close", position: { my: "right bottom", at: "right bottom", of: window }});
                    $('#menuButton').html("Close");
                    menuOpen=true;
                }
                else
                {
                    $('#menu').dialog("close");
                    $('#menuButton').html("Open");
                    menuOpen=false;
                }
            }


        </script>
        </head>
           <body>
        <button onclick="toggleFunctionMenu()" id="menuButton">Open</button>
        <div id="menu">
        </div>
    </body>
    </html>

【讨论】：

逻辑有效。虽然奇怪的行为。如果你只放 200 个，那就是 200 个。
你也必须改变css的顺序:)
我也正要发布图片输出的样子
css的顺序是什么意思？
先放置样式标签，然后是脚本，如我的代码所示