Jquery ui 允许下拉/选择在chrome extension中展开外部弹出窗口_Jquery Ui_Twitter Bootstrap 3_Google Chrome Extension_Popup_Overlay

Jquery ui 允许下拉/选择在chrome extension中展开外部弹出窗口

jquery-ui twitter-bootstrap-3 google-chrome-extension

Jquery ui 允许下拉/选择在chrome extension中展开外部弹出窗口,jquery-ui,twitter-bootstrap-3,google-chrome-extension,popup,overlay,Jquery Ui,Twitter Bootstrap 3,Google Chrome Extension,Popup,Overlay,我是Chrome扩展开发的新手，我有一个关于限制/如何使用弹出窗口的问题我有多个下拉列表（使用引导）和选择菜单（使用jqueryui）。我希望将弹出窗口的大小保持在最小值（比如说最大100px）。我有两个问题： 1）当我使用下拉菜单时，弹出窗口的大小会变大，覆盖整个网站以弥补下拉菜单的大小。如果超过页面最大高度，则下拉菜单上会有一个滚动条 2）选择菜单不会使弹出窗口变大，也不会完全显示给用户我想让它们显示在弹出窗口的外面，保持弹出窗口的高度在100px。尝试玩z指数和位置，没有运气。顺便

我是Chrome扩展开发的新手，我有一个关于限制/如何使用弹出窗口的问题

我有多个下拉列表（使用引导）和选择菜单（使用jqueryui）。我希望将弹出窗口的大小保持在最小值（比如说最大100px）。我有两个问题：

1）当我使用下拉菜单时，弹出窗口的大小会变大，覆盖整个网站以弥补下拉菜单的大小。如果超过页面最大高度，则下拉菜单上会有一个滚动条

2）选择菜单不会使弹出窗口变大，也不会完全显示给用户

我想让它们显示在弹出窗口的外面，保持弹出窗口的高度在100px。尝试玩z指数和位置，没有运气。顺便说一句，使用普通的系统下拉菜单可以很好地工作（它离开容器而不改变弹出窗口的大小）


测试



测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试



视视

native有什么问题？弹出窗口只是一个小DOM窗口，因此所有常见的内容行为限制都适用。再加上一些，最大尺寸是800*600px。我想对下拉菜单的设计有更多的控制，所以没有本机选择。我知道有更多的限制，但下拉列表是否可能显示在800*600px弹出窗口之外？有许多库可以替换和自定义常规选择。走那条路。使用列表将无法使弹出窗口保持较小。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">

        <title>test</title>

        <script src="lib/jquery/jquery-3.1.1.min.js"></script>
        <script src="lib/bootstrap/bootstrap.min.js"></script>
        <script src="lib/jquery/jquery-ui.min.js"></script>

        <link href="lib/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="lib/jquery/jquery-ui.min.css" rel="stylesheet" media="screen">
    </head>

    <body>

        <nav class="navbar navbar-default" role="navigation">
            <a class="navbar-brand navbar-right" href="#">Extension &nbsp;</a>

            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Test</a>
                        <ul class="dropdown-menu">
                            <li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li>
                            <li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li><li><a>Test</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>

        <section>
            <select class="form-control">
                <option>opt</option><option>opt</option><option>opt</option><option>opt</option><option>opt</option><option>opt</option><option>opt</option><option>opt</option><option>opt</option><option>opt</option><option>opt</option>
            </select>
        </section>
    </body>
</html>