How to add a button in lightning experience and open a component as modal using that button

Question

I have to open my lightning component on click of a button which is at opportunity layout in lightning experience. I have tried using actions by creating a vf page but its not looking good. Is there is any way to done the on click functionality.

Answer 1

You can encapsulate your Lightning Component using the Modal component provided by Lightning Design System.

<div>
  <div aria-hidden="false" role="dialog" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
      <div class="slds-modal__header">
        <h2 class="slds-text-heading--medium">Modal Header</h2>
        <button class="slds-button slds-button--icon-inverse slds-modal__close">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
            <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close</span>
        </button>
      </div>
      <div class="slds-modal__content">
        <div>
          PLACE YOUR COMPONENT HERE!
        </div>
      </div>
      <div class="slds-modal__footer">
        <div class="slds-x-small-buttons--horizontal">
          <button class="slds-button slds-button--neutral">Cancel</button>
          <button class="slds-button slds-button--neutral slds-button--brand">Save</button>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-backdrop slds-backdrop--open"></div>
</div>

Answer 2

Well you can try custom action bar button to open your modal

Here is an example

<aura:component implements="force:lightningQuickAction>
//Your modal code goes here
</aura:component>

You can add a lightning based action button inside

Setup -> Quick Find -> Object Manager -> opportunity

Try to add a Action button by choosing option as lightning component

After you can add this button inside component layout by dragging this into lightning and salesforce1 field.

Here is some useful links

https://trailhead.salesforce.com/en/modules/salesforce1_mobile_app/units/salesforce1_mobile_app_actions_objectspecific

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_lex_s1_config_action.htm