Activity Forums Salesforce® Discussions How to create a pop up in Salesforce Lightning?

  • How to create a pop up in Salesforce Lightning?

  • Kumar

    Member
    December 28, 2016 at 12:56 pm

    Hi all,

    Is there any way to create a popup window in lightning without using modal component?

    Thanks

  • SSV

    Member
    January 9, 2017 at 10:21 am
  • Louis

    Member
    July 27, 2017 at 4:18 pm

    Hi kumar,

    Find here all steps to create pop up in salesforce lightning :-

    </aura:component>

    <div class="slds-m-around--xx-large">

    <button class="slds-button slds-button--brand" onclick="{!c.openModel}">Create Account</button>

     

    <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->

    <aura:if isTrue="{!v.isOpen}">

     

    <!--###### MODAL BOX Start From Here ######-->

    <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">

    <div class="slds-modal__container">

    <!-- ###### MODAL BOX HEADER Part Start From Here ######-->

    <div class="slds-modal__header">

    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}">

    X

    <span class="slds-assistive-text">Close</span>

    </button>

    <h2 id="header99" class="slds-text-heading--medium">New Account</h2>

    </div>

    <!--###### MODAL BOX BODY Part Start From Here ######-->

    <div class="slds-modal__content slds-p-around--medium">

    <fieldset class="slds-form--compound">

    <div class="slds-form-element">

    <label class="slds-form-element__label" for="text-input-01">Account name</label>

    <div class="slds-form-element__control">

    <input type="text" id="text-input-01"  aura:id="AccountName" class="slds-input"  value="{!v.insertAccount.Name}"

    placeholder="Enter name"   />

    </div>

    </div>

    </fieldset>

    <fieldset class="slds-form--compound">

    <div class="slds-form-element">

    <label class="slds-form-element__label" for="text-input-01">Phone</label>

    <div class="slds-form-element__control">

    <input type="text" id="text-input-01" class="slds-input" value="{!v.insertAccount.phone}" placeholder="Enter phone" />

    </div>

    </div>

    </fieldset>

    <fieldset class="slds-form--compound">

    <div class="slds-form-element">

    <label class="slds-form-element__label" for="text-input-01">Industry</label>

    <div class="slds-form-element__control">

    <input type="text" id="text-input-01" class="slds-input" value="{!v.insertAccount.industry}" placeholder="Placeholder Text" />

    </div>

    </div>

    </fieldset>

    </div>

    <!--###### MODAL BOX FOOTER Part Start From Here ######-->

    <div class="slds-modal__footer">

    <button class="slds-button slds-button--neutral" onclick="{!c.closeModel}" >Cancel</button>

    <button class="slds-button slds-button--brand" onclick="{!c.save}">Save</button>

    </div>

    </div>

    </div>

    <div class="slds-backdrop slds-backdrop--open"></div>

    <!--###### MODAL BOX Part END Here ######-->

     

    </aura:if>

    </div>

    </aura:component>

     

    ({

    openModel: function(component, event, helper) {

    // for Display Model,set the "isOpen" attribute to "true"

    component.set("v.isOpen", true);

     

    },

    ({

    closeModel: function(component, event, helper) {

    // for close Model,set the "isOpen" attribute to "false"

    component.set("v.isOpen", false);

     

    },

    1. Open the installation file you downloaded and saved, and complete the installation wizard.

    1.       Open Microsoft® Outlook®. The setup wizard opens, and the Salesforce for Outlook icon appears in your system tray. If the wizard doesn’t open, you can start it manually. Right-click and click Settings.

    2.       If you want to log in to a Salesforce site other than the default, click Change URL and pick the server to which you want to connect. If the server you want isn’t listed, select other... and enter the URL, such as a custom domain used by your organization.

    3.       Enter your Salesforce username and password.

    4.       Click Approve. Doing so creates a secure connection between Outlook and Salesforce. You don’t have to log in again unless you encounter an error.

    5.      Click Next, and review the sync directions set up by your administrator. To sync your Outlook items to different folders, click Change Folder and select folders that are within your default folder or the main Mailbox folder.

    New Picture

     

    1.       Click Next, and then select your sync method.

    §  Choose to sync all your contacts, events, and tasks. Mark items that you don’t want to sync with the “Don’t Sync with Salesforce” category in Outlook.

    §  Choose to sync individual contacts, events, and tasks. Mark items that you want to sync with the “Sync with Salesforce” category in Outlook.

    New Picture (1)

     

    Click Next, and then select the kinds of private items you want to sync.

     

    New Picture (2)

    Click Save. A welcome message appears at the system tray icon, which is now active. If you’re configured to sync Outlook items, and you chose Sync Only the Outlook Items I Select for your sync method, all items in the folders you chose start syncing automatically. The icon spins during every sync cycle.

    New Picture (3)

    • This reply was modified 4 years, 4 months ago by  Louis.
  • shariq

    Member
    September 18, 2018 at 3:32 pm

    Hi,

    You can use the below code :

    <div class="slds">
    <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--prompt slds-fade-in-hide" aura:id="modaldialog">
    <div class="slds-modal__container">
    <div class="slds-modal__header slds-theme--info">
    <button class="slds-button slds-button--icon-inverse slds-notify__close" onclick="{!c.hidePopup}">
    <c:svg aria-hidden="false" class="slds-button__icon slds-button__icon--large" xlinkHref="/resource/SLDS105/assets/icons/action-sprite/svg/symbols.svg#close">
    </c:svg>
    <span class="slds-assistive-text">Close</span>
    </button>
    <h2 class="slds-text-heading--medium">Your Title</h2>
    </div>
    <div class="slds-modal__content slds-p-around--medium">
    <div>
    <p>{!v.body}</p>
    </div>
    </div>
    </div>
    </div>
    </div>

    Thanks

Viewing 1 - 4 of 4 posts

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos