如何使模式出现在Web部件上，而不是在Web部件上，以及为什么它可以在工作台上工作，而不是在部署时不能工作

问题描述

我正在使用SPFX创建SharePoint Webpart，并且注意到该模式不是在Web部件的顶部而是在Web部件的内部打开的。我希望它在webparts尺寸之外打开。我知道可以做到这一点，因为我有一个成功完成该任务的类似Webpart，但是由于某种原因，该特定Webpart没有做到这一点。

这是我正在使用的模式以及初始Webpart的CSS：

.panelMeetTab {
  .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 100%;
    margin: 0px auto;
    Box-shadow: 0 2px 4px 0 rgba(0,0.2),0 25px 50px 0 rgba(0,0.1);
  }

}
  .modalBody {
    height: 1300px;
    width: 1800px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 2px;
    overflow: clip;
  }

这是JSX中的模式：

<Modal
  titleAriaId={this._titleId}
  subtitleAriaId={this._subtitleId}
  isOpen={this.state.showModal}
  ondismiss={this._closeModal}
  closeButtonAriaLabel={"Close"}
  isBlocking={true}
  containerClassName={styles.modalBody}
  >

该模式位于Webpart的内。我尝试使用用户在单击初始Webpart启动按钮时切换的条件：

if(this.state.showModal == false){
    return (
      //Don't show modal
         )
}

if(this.state.showModal == true){
   return (
    //show modal on users click of button
      )
}

这似乎使Webpart崩溃了。所有这些都可以在工作台上完美地工作，但是如果我部署到实际的SPO站点上则不能。

其他信息：如果我使用上述条件，则单击打开模式的按钮后，它似乎使webpart崩溃，没有任何错误。我试过登录工作台和已部署的Webpart，但它没有任何提示。检查元素甚至没有什么可收集的，因为崩溃后没有任何东西。如果我不使用上述条件作为模态，则在部署按钮时单击按钮时它不会崩溃，但是模态位于Web部件中，我不希望这样做。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

sharepoint sharepoint-online spfx