这是很容易只是按照该网站的例子让一个Twitter的引导模式中的XPages工作。 然而，这似乎并没有工作，如果你想使用SSJS影响模式的内容被显示之前。 这似乎闪烁，往往只是节目的背景。
这似乎是使用XPages中全部或部分刷新的问题。
我试图得到它的“正常”的工作，我已经使用jQuery和远程服务来获得，没有运气的变化尝试。
下面是与远程服务的代码。
关于如何影响或刷新之前示出的对话框的模态内容的任何示例，将不胜感激。
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:layout_Header></xc:layout_Header>
<xp:link escape="true" text="Link" id="link1" value="#myModal">
<xp:this.attrs>
<xp:attr name="role" value="button"></xp:attr>
<xp:attr name="data-toggle" value="modal"></xp:attr>
</xp:this.attrs>
</xp:link>
<xp:br></xp:br>
<xp:panel id="myPanel">
<xc:bs_Modal idName="myModal">
<xp:this.facets>
<xp:panel xp:key="facet_1">
My Dialog
<xp:br></xp:br>
<xp:br></xp:br>
Time
<xp:text escape="true" id="computedField1"
value="#{viewScope.vsTime}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
</xp:panel>
</xp:this.facets>
</xc:bs_Modal>
</xp:panel>
<xp:br></xp:br>
<xe:jsonRpcService id="jsonRpcService1" serviceName="testService">
<xe:this.methods>
<xe:remoteMethod name="setTime">
<xe:this.script><![CDATA[viewScope.put("vsTime", @Now())]]></xe:this.script>
</xe:remoteMethod>
</xe:this.methods></xe:jsonRpcService>
<xp:br></xp:br>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$('#myModal').on('show', function () {
testService.setTime();
var id = "#{id:myPanel}"
XSP.partialRefreshGet(id)
})]]></xp:this.value>
</xp:scriptBlock></xp:view>
因为它已经进行XPages完全集成的，我会用<xe:dialog>从扩展库，而不是和修改（添加/删除类），使它看起来像一个引导模式。
下面是一些示例代码，以帮助您开始：
<xe:dialog id="dialog1" title="Dialog title" styleClass="modal" style="margin-left: inherit">
<xe:this.onShow>
<![CDATA[//make the dialog look like a Bootstrap dialog using some jQuery magic
//add the modal-header class to the title bar
var titleBar = $(".modal .dijitDialogTitleBar").addClass("modal-header");
//replace title node (by default it's a span)
var titleNode = $(".dijitDialogTitle", titleBar);
var title = titleNode.text();
titleNode.remove();
//add a class to the close icon
$(".dijitDialogCloseIcon", titleBar).removeClass("dijitDialogCloseIcon").addClass("close");
//add a new h3 node with the title
titleBar.append("<h3>" + title + "</h3>");
]]>
</xe:this.onShow>
<xe:dialogContent id="dialogContent1" styleClass="modal-body">
dialog content here
</xe:dialogContent>
<xe:dialogButtonBar id="dialogButtonBar1" styleClass="modal-footer">
<xp:button value="Close" id="button2"></xp:button>
</xe:dialogButtonBar>
</xe:dialog>
使触发模式，柜面的东西之前提供的模态内容显示，我们可以使用回调函数选项的模态对话框后发生。
var id = "#{id:myPanel}"
XSP.partialRefreshGet(id,{
onComplete: function(){
$('#myModal').modal('show');
}
});
我解决复杂这一问题。 与保存问题后存在NotesXspDocument局部刷新后。
它为我，也许它是帮助你。
1）在WebContent文件夹，例如的WebContent /模板/ CustomDialog.html的对话框创建HTML模板：
<div class="modal fade" tabindex="-1" waiRole="dialog" waiState="labelledby-${id}_title" data-backdrop="static" data-keyboard="false">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div dojoAttachPoint="titleBar" class="modal-header">
<span dojoAttachPoint="closeButtonNode">
<button type="button" title="${buttonCancel}" class="close" aria-hidden="true" dojoAttachEvent="onclick: onCancel">×</button>
</span>
<h4 class='modal-title' dojoAttachPoint="titleNode" id="${id}_title"></h4>
</div>
<div dojoAttachPoint="containerNode"></div>
</div>
</div>
</div>
2）创建代码csjs库：
dojo.provide("extlib.responsive.dijit.xsp.bootstrap.Dialog");
dojo.require("extlib.dijit.Dialog");
dojo.declare(
"extlib.responsive.dijit.xsp.bootstrap.Dialog",
extlib.dijit.Dialog,
{
baseClass: "",
templateString: dojo.cache(new dojo._Url("templates/CustomDialog.html")),
draggable: false,
autofocus:false,
iframePost: false,
modalStyleClass: "",
show: function() {
if(this.open){
return;
}
if(!this._started){
this.startup();
}
// first time we show the dialog, there's some initialization stuff to do
if(!this._alreadyInitialized){
this._setup();
this._alreadyInitialized = true;
}
// Recenter Dialog if user scrolls browser. Connecting to document doesn't work on IE, need to use window.
var win = dojo.window.get(this.ownerDocument);
//this._modalconnects.push(dojo.on(win, "scroll", dojo.hitch(this, "resize")));
this._modalconnects.push(dojo.on(this.domNode, "keydown", dojo.hitch(this, "_onKey")));
dojo.style(this.domNode, {
display: "",
position: "",
top: "",
left: ""
});
this._set("open", true);
this._onShow(); // lazy load trigger
this._size();
this._position();
var node = $(this.domNode);
if(this.modalStyleClass) node.children(".modal-dialog").addClass(this.modalStyleClass);
node.modal('show').on('shown.bs.modal', dojo.hitch(this, function() {
if(this.autofocus) this.focus();
}));
if(this.iframePost) {
this.xhrPost = dojo.xhrPost;
dojo.xhrPost = function(o) {
dojo.require("dojo.io.iframe");
o.handleAs = "html";
var load = o.load;
o.load = function(response, ioArgs) {
load(response.body.innerHTML, ioArgs);
}
dojo.io.iframe.send(o)
}
}
},
hide: function() {
if(this.iframePost) {
dojo.xhrPost = this.xhrPost;
}
if(!this._alreadyInitialized || !this.open){
return;
}
if(this._scrollConnected){
this._scrollConnected = false;
}
var h;
while(h = this._modalconnects.pop()){
h.remove();
}
if(this._relativePosition){
delete this._relativePosition;
}
this._set("open", false);
return $(this.domNode).modal('hide');
},
resize: function() {},
_size: function() {},
_position: function() {},
destroy: function() {
var h;
while(h = this._modalconnects.pop()){
h.remove();
}
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
this.inherited(arguments);}
}
}
);
XSP._dialog_type = "extlib.responsive.dijit.xsp.bootstrap.Dialog";
（代码很大一部分，我从扩展库获取）
现在我们必须通过dijit的小部件引导对话框。 这是由XSP.openDialog和XSP.closeDialog和工作SSJS代码调用
注：如果需要的模态-LG或模态-SM对话框，然后添加到<xe:dialog>道场属性modalStyleClass（参见步骤2）值的模态-LG
