Twitter bootstrap extlib中的大型bootsrap对话框位于底部

我有一个来自ExtLib的对话框，我使用boostrap配置。 打开对话框时，焦点位于对话框底部。如果对话框比屏幕大，我看不到对话框的顶部，我必须滚动。这不是我想要的。 有解决办法吗？在我的对话框中，只有计算值

编辑： 这里有一个例子

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex"
    xmlns:xc="http://www.ibm.com/xsp/custom">
    <style type="text/css">
        .bgSizeCover {
            height: 300px;
            width: 300px;
            background-size: cover;
            background-position: center center
        }
        .txtpos {
            width: 100%;
            height: 70px;
            position: absolute;
            bottom: 0px;
            left: 0;
            background: rgba(245,245,245,0.75);
        }
        /*modal*/
        .modal-dialog {
          width: 90%;
          margin-left: -250px;
        }
        .modal-content {
          width: 95%;
        }
    </style>
    <xp:div>
        <xp:this.styleClass>
            <![CDATA[#{javascript:
                var grid = "col-xs-12 col-sm-12 col-md-12 col-lg-12";
                return "overflow-ellipsis " + grid;}]]>
        </xp:this.styleClass>
        <xp:this.style><![CDATA[#{javascript:"min-width: 250px"}]]></xp:this.style>
        <xp:panel
            tagName="a"
            id="datarow"
            styleClass="list-group-item bgSizeCover">
            <xp:this.attrs>
                <xp:attr name="onclick">
                    <xp:this.value>
                        <![CDATA[XSP.openDialog("#{id:dialog1}");]]>
                    </xp:this.value>
                </xp:attr>
            </xp:this.attrs>
            <xp:this.style>
                <![CDATA[#{javascript:
                    "background-image: url('http://placehold.it/640x640/')"
                }]]>
            </xp:this.style>
            <div class="txtpos">
                <xp:text
                    id="label"
                    tagName="h4"
                    style="padding-right:7px">
                    <xp:this.value><![CDATA[#{javascript:"Title"}]]></xp:this.value>
                </xp:text>
                <xp:text
                    tagName="p"
                    id="computedField1"
                    styleClass="rowDetails">
                    <xp:this.value>
                        <![CDATA[#{javascript:"Number"}]]>
                    </xp:this.value>
                </xp:text>
            </div>
        </xp:panel>
    </xp:div>
    <xe:dialog
        id="dialog1"
        styleClass="modal-dialog"
        title="Title"
        tooltip="Modal">
        <xe:dialogContent
            id="dialogContent1"
            style="modal-content">
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField14"
                    value="Projekt">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField15"
                    value="Name">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField4"
                    value="Auftraggeber">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField5"
                    value="RefBPRefSheet">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField6"
                    value="Leistungszeitraum">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField7"
                    value="RefVestingPeriod">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField8"
                    value="Projektvolumen">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField9"
                    value="RefProjVolumeString">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField10"
                    value="Projektbeschreibung">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField11"
                    value="RefProjDescriptRefSheet">
                </xp:text>
            </xp:div>

            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField12"
                    value="Ingenieurleistungen">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField13"
                    value="RefServicesRefSheet">
                </xp:text>
            </xp:div>

            <xp:image
                styleClass="img-rounded"
                url="http://placehold.it/640x640/"
                id="personpic">
            </xp:image>
        </xe:dialogContent>
        <xe:dialogButtonBar id="dialogButtonBar1">
            <xp:button
                value="Schließen"
                id="buttonClose"
                styleClass="btn btn-default">
                <xp:eventHandler
                    event="onclick"
                    submit="true"
                    refreshMode="partial"
                    refreshId="dialog1">
                    <xp:this.action>
                        <![CDATA[#{javascript:getComponent("dialog1").hide()}]]>
                    </xp:this.action>
                </xp:eventHandler>
                <i class="glyphicon glyphicon-remove" />
            </xp:button>
        </xe:dialogButtonBar>
    </xe:dialog>
</xp:view>

---

引导模式对话框将自动将焦点给予它在对话框中找到的第一个可以聚焦的元素。在您的示例中，唯一可以聚焦的是底部的按钮。如果您在顶部有另一个控件，比如可以对焦的输入或按钮，那么它将首先获得焦点，您将看到对话框内容的顶部

不过，您可以将属性tabindex=-1添加到底部按钮。因此，对话框中的任何内容都无法聚焦，因此在打开对话框时，它将保持在顶部。但是，这可能会产生不期望的效果，因为您无法再按该按钮

---

您可以查看挂接对话框的show.bs.modal事件，并在其中将焦点发送到其他位置，如中。有关模式事件的信息，请参见too。

引导模式对话框将自动将焦点放在它在对话框中找到的第一个可以聚焦的元素上。在您的示例中，唯一可以聚焦的是底部的按钮。如果您在顶部有另一个控件，比如可以对焦的输入或按钮，那么它将首先获得焦点，您将看到对话框内容的顶部

不过，您可以将属性tabindex=-1添加到底部按钮。因此，对话框中的任何内容都无法聚焦，因此在打开对话框时，它将保持在顶部。但是，这可能会产生不期望的效果，因为您无法再按该按钮

---

您可以查看挂接对话框的show.bs.modal事件，并在其中将焦点发送到其他位置，如中。有关模式事件的信息，请参见too。

ExtLib中的对话框使用Dojo。即使您启用了引导主题：它仍然是一个Dojo对话框，但只有CSS和一些HTML是不同的，以使它具有引导外观

默认情况下，Dojo对话框将焦点设置在它在对话框中找到的第一个可聚焦元素上：这是一个辅助功能。根据您的内容，按钮可以一直位于底部

要更改或禁用此行为（有时是不受欢迎的行为），可以将autofocus Dojo属性设置为false：

---

ExtLib中的对话框使用Dojo。即使您启用了引导主题：它仍然是一个Dojo对话框，但只有CSS和一些HTML是不同的，以使它具有引导外观

默认情况下，Dojo对话框将焦点设置在它在对话框中找到的第一个可聚焦元素上：这是一个辅助功能。根据您的内容，按钮可以一直位于底部

要更改或禁用此行为（有时是不受欢迎的行为），可以将autofocus Dojo属性设置为false：

---

你能提供一个简单的代码示例来重现这个问题吗？问题有点含糊，你能提供一个简单的代码示例来重现这个问题吗？问题有点模糊，这就是我要找的。谢谢！这就是我要找的。谢谢！

<xe:dialog
    id="dialog1">

    <xe:this.dojoAttributes>
        <xp:dojoAttribute
            name="autofocus"
            value="false">
        </xp:dojoAttribute>
    </xe:this.dojoAttributes>

   ....