javascript - 从 SharePoint Online 的内容中影响 iFrame CSS

Question

我正在使用以下标准代码生成模态表单:

function openMyForm() { 
  SP.UI.ModalDialog.showModalDialog({ 
    url: currentSite + "/SiteAssets/myForm.aspx" 
    title: "My Form", 
    allowMaximize: false, 
    showClose: true, 
    width: 1000,  
    height: 600
  }); 
}

但是 CSS 存在问题 - 关闭按钮位置已关闭:

问题可以追溯到以下 CSS:

.ms-dlgTitleBtns {
  margin-top: -10px;
  margin-right: -18px;
  height: 30px;
  float: right;
}

具体margin-right应该是0px。

myForm.aspx 位于 SharePoint 生成的 iFrame 中，其中包含上述 CSS。我如何更改该值或以其他方式在正确的位置获得该关闭按钮。即:

我试过添加

.ms-dlgTitleBtns {
  margin-right: 0px !important;
}

和

$(function() {  

    $(".ms-dlgTitleBtns").css("margin-right","0");

});

到 myForm.aspx 但由于 iFrame 当然没有任何效果。

Answer 1

ms-dlgTitleBtns 类的问题元素位于托管页面上，而不是表单本身；将您的自定义脚本/CSS 放在同一页面上，使您不必通过 iframe 修改不同页面上的内容。

您可以将 JavaScript/CSS 添加到打开对话框的页面，而不是将其添加到表单本身。

(只需确保在实现更改后正确刷新 app.js 文件即可。)