How to create a pop up in Salesforce Lightning?

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.

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.

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

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.

• This reply was modified 9 years ago by  Louis.