的XPages引導模態 - 如何使它可拖動

Question

我使用bootstrapResponsiveConfiguration Domino服務器上：9.0.1 FP6與分機庫版本 - ExtensionLibraryOpenNTF-901v00_17.20160428-0214

對話框控制（莫代爾自舉）是不可拖動。如何使對話框控件可拖動？

<?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"> 
 
\t <xe:applicationLayout id="applicationLayout1"> 
 
\t \t <xp:panel> 
 
\t \t \t <xp:button id="button1" styleClass="btn-primary" value="Show Dialog"> 
 
\t \t \t \t <i class="fa fa-user" /> 
 
\t \t \t \t <xp:eventHandler event="onclick" submit="false"> 
 
\t \t \t \t \t <xp:this.script><![CDATA[//getComponent("dialog1").show(); 
 
XSP.openDialog("#{id:dialog1}")]]></xp:this.script> 
 
\t \t \t \t </xp:eventHandler> 
 
\t \t \t </xp:button> 
 
\t \t \t <xe:dialog id="dialog1" title="Dialog Title"> 
 
\t \t \t \t <xe:this.onShow> 
 
\t \t \t \t \t <![CDATA[$(".xsp-responsive-modal").removeClass("xsp-responsive-modal").addClass("my-responsive-modal");]]> 
 
\t \t \t \t </xe:this.onShow> 
 
\t \t \t \t <xp:table> 
 
\t \t \t \t \t <xp:tr> 
 
\t \t \t \t \t \t <xp:td> 
 
\t \t \t \t \t \t \t <xp:label value="Label"></xp:label> 
 
\t \t \t \t \t \t </xp:td> 
 
\t \t \t \t \t \t <xp:td> 
 
\t \t \t \t \t \t \t <xp:inputText></xp:inputText> 
 
\t \t \t \t \t \t </xp:td> 
 
\t \t \t \t \t </xp:tr> 
 
\t \t \t \t </xp:table> 
 
\t \t \t \t <xe:dialogButtonBar> 
 
\t \t \t \t \t <xp:button value="Cancel"></xp:button> 
 
\t \t \t \t \t <xp:button value="Save" styleClass="btn-primary"></xp:button> 
 
\t \t \t \t </xe:dialogButtonBar> 
 
\t \t \t </xe:dialog> 
 
\t \t </xp:panel> 
 
\t \t <xp:this.facets> 
 
\t \t \t <xe:navigator id="navigator1" xp:key="LeftColumn"> 
 
\t \t \t \t <xe:this.treeNodes> 
 
\t \t \t \t \t <xe:basicLeafNode label="Link 1"></xe:basicLeafNode> 
 
\t \t \t \t \t <xe:basicLeafNode label="Link 2"></xe:basicLeafNode> 
 
\t \t \t \t </xe:this.treeNodes> 
 
\t \t \t </xe:navigator> 
 
\t \t </xp:this.facets> 
 
\t \t <xe:this.configuration> 
 
\t \t \t <xe:bootstrapResponsiveConfiguration productLogo="/car.png" 
 
\t \t \t \t placeBarName="New Application Name" placeBar="true" titleBar="false" 
 
\t \t \t \t invertedNavbar="true" collapseLeftColumn="true" 
 
\t \t \t \t collapseLeftMenuLabel="Menu Title" footer="false" legal="false"> 
 
\t \t \t \t <xe:this.bannerUtilityLinks> 
 
\t \t \t \t \t <xe:loginTreeNode styleClass="logout"></xe:loginTreeNode> 
 
\t \t \t \t \t <xe:basicLeafNode label="#{javascript:@UserName();}" styleClass="username"></xe:basicLeafNode> 
 
\t \t \t \t </xe:this.bannerUtilityLinks> 
 
\t \t \t \t <xe:this.placeBarActions> 
 
\t \t \t \t \t <xe:basicLeafNode label="Link 1"></xe:basicLeafNode> 
 
\t \t \t \t \t <xe:basicLeafNode label="Link 2"></xe:basicLeafNode> 
 
\t \t \t \t </xe:this.placeBarActions> 
 
\t \t \t </xe:bootstrapResponsiveConfiguration> 
 
\t \t </xe:this.configuration> 
 
\t </xe:applicationLayout> \t 
 
</xp:view>

我在主題添加樣式表裏面的CSS，並已將其列入：

 

    .my-responsive-modal { 
     display: block; 
     width: auto; 
     left: 0; 
     top: 0; 
     z-index: 1050 !important; 
    } 

Answer 1

在XSP-mixin.css的.xsp-responsive-modal類在left和top上使用!important操作阻止模式被拖動。

我的工作是用我自己的班級.my-responsive-modal替換.xsp-responsive-modal班級，該班級不使用!important。

要更換我使用對話框的昂秀事件的類：

<xe:this.onShow> 
    <![CDATA[ 
     x$("#{id:dialog1}").removeClass("xsp-responsive-modal").addClass("my-responsive-modal"); 
    ]]> 
</xe:this.onShow> 

這裏是.my-responsive-modal類：

.my-responsive-modal { /* copy of .xsp-responsive-modal with important removed from left and top to enable dragging in xe:dialog */ 
    display: block; 
    width: auto; 
    left: 0; 
    top: 0; 
    z-index: 1050 !important; 
} 

注：x$()功能是馬克羅登到一個方便的工具在ID中使用'escape'：'使它們與JQuery一起工作（https://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages）