Большой загрузочный диалог с фокуса extlib внизу
У меня есть диалог с 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>
2 ответа
Диалоги из ExtLib используют Dojo. Даже если у вас включена тема Bootstrap: это все-таки диалог Dojo, только CSS (и немного HTML) отличается от внешнего вида Bootstrap.
По умолчанию диалог Dojo устанавливает фокус на первый фокусируемый элемент, который он находит в диалоге: это функция доступности. В зависимости от вашего контента это может быть кнопка, расположенная полностью внизу.
Чтобы изменить (отключить) это, иногда нежелательное поведение, вы можете установить autofocus Атрибут Dojo false:
<xe:dialog
id="dialog1">
<xe:this.dojoAttributes>
<xp:dojoAttribute
name="autofocus"
value="false">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
....
Модальное диалоговое окно начальной загрузки автоматически придаст фокус первому найденному в диалоговом окне элементу, который может получить фокус. В вашем примере единственная вещь, которая может сфокусироваться, - кнопка внизу. Если бы у вас был другой элемент управления вверху, например, вход или кнопка, способная фокусироваться, то сначала это было бы сфокусировано, и вы бы увидели верхнюю часть содержимого диалога.
Что вы можете сделать, это добавить свойство tabindex="-1" к вашей нижней кнопке. Таким образом, ничто в диалоге не может сфокусироваться, поэтому оно остается наверху при открытии диалога. Однако это может иметь нежелательные эффекты, так как вы больше не можете нажимать на кнопку.
Вы могли бы заглянуть в shown.bs.modal событие диалога, и там отправьте фокус в другом месте, как в этом примере. См. Документацию по начальной загрузке для получения информации о модальных событиях.