Xpages Bootstrap Modal-如何使其可拖动

Question

我在Domino服务器上使用bootstrapResponsiveConfiguration：9.0.1 FP6和Ext Lib版本-ExtensionLibraryOpenNTF-901v00_17.20160428-0214

对话框控件（引导程序中为Modal）不可拖动。如何使对话框控件可拖动？

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

我已经在样式表中添加了CSS，并将其包含在主题中：

    .my-sensitive-modal {
        显示：块；
        宽度：自动;
        左：0；
        最高：0;
        z-index：1050！important；
    }

Answer 1

.xsp-responsive-modalxsp-mixin.css中的类在和 属性!important上使用，以防止拖动模式。lefttop

我通过用.xsp-responsive-modal自己的.my-responsive-modal不使用的类替换该类来解决此问题!important。

要替换该类，请使用对话框的onShow事件：

<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$()函数是Mark Roden的便捷实用程序，可在ID中转义'：'，以便它们与JQuery（https://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for -xpages）