Question

我使用了Lightning组件，我想知道如何设置闪电动作模式弹出窗口的宽度？

在我的代码下面：

标记组件：

＆＃13;

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="Lead_Coface_Controller">
	
    <div aura:id="messages">
   	{!v.message}
    </div>
	
</aura:component>

＆＃13;

css：

＆＃13;

.THIS{
	
}

＆＃13;

Answer 1

您将在控制器js的组件和逻辑中包含模式代码因此，将此代码添加到 css 文件中，确保在组件模式代码中拥有名为slds-modal__container的此类

.THIS .slds-modal__container {
  margin: 0 auto;
  width: 50%;
  max-width: 100%;
 }

Answer 2

您可以尝试以下代码。

在doInt中的控制器中（或在所需位置）

var modal1 = component.find（“messages”）;

$ A.util.addClass（modal1， 'YourClass'）;

风格

.THIS.YourClass {width：50％;} //更改css值

Answer 3

app.css的一部分

＆＃13;

.slds-modal__container {position:relative;-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:-webkit-transform .1s linear,opacity .1s linear;transition:transform .1s linear,opacity .1s linear;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin: 3px 2rem;height:100%;padding:3rem 0;border-radius:.25rem;}
@media (min-width: 48em) {
  .slds-modal__container {margin:0 auto; width:50%; max-width:40rem; min-width:20rem}
}

＆＃13;

Answer 4

在模态的<section>标记中，根据需要添加类slds-modal_large或slds-modal_medium。

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large">         
      <div class="slds-modal__container">
         SOME MODAL STUFF HERE
      </div
</section>

Salesforce闪电动作模式大小

4 个答案: