Question

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="JS/jquery-1.11.0.min.js"></script>
        <script src="JS/bootstrap.js"></script>
        <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
        <link rel="stylesheet" href="CSS/bootstrap.css" type="text/css" media="screen"/>
        <link rel="stylesheet" href="CSS/bootstrap-theme.css" type="text/css" media="screen"/>
    </head>
    <body>
        <h3>External Form</h3>
        <a id="test" href="javascript:void(0);" data-toggle="modal" data-target="#myWufooModal">
            Please fill out my form.
        </a>
        <div class="modal fade" id="myWufooModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="width:700px;">
                    <div class="modal-body">
                        <object type="text/html" data="https://ss88.wufoo.com/forms/rmndx1a0zzpe4m/" style="width:640px;height:730px;">
                        </object>
                    </div>
                </div>
            </div>
    </body>
</html>

在localhost中运行此代码时，它可以正常工作。在应用我的网站时，它会显示滚动条，我调整相应CSS样式的宽度，仍然保持滚动条，我可以知道如何解决这个问题吗？

Answer 1

overflow:hidden的问题是它会隐藏表单中的详细信息，并且根据屏幕大小，不同的用户会在表单中看到不同的列数，因为内容溢出被隐藏了。

我建议您在弹出页面上使用 Media Queries 并缩小表单中项目的大小（读取身高）

这样的话就是我的建议：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .form-textbox, .form-textarea {
       width: 250px;height:20px /* dummy size, use you own */
   }

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  .form-textbox, .form-textarea {
     width: 250px;height:20px  /* dummy size, use you own */
  }

}

Good Read on Media Q： Smashing Magazine

Answer 2

试试这个

<div class="modal-dialog" style="overflow:hidden">
    <div class="modal-content" style="width:700px;">
        <div class="modal-body">
            <object type="text/html" data="https://ss88.wufoo.com/forms/rmndx1a0zzpe4m/" style="width:640px;height:730px;">
            </object>
        </div>
    </div>
</div>

Answer 3

将overflow设为hidden

<div class="modal-dialog" style="overflow:hidden">
<!--    Model Body-->
</div>

Answer 4

<div class="modal-dialog" style="overflow:hidden">

Demo

如何在弹出窗体中删除滚动条

4 个答案: