ms.modal

The modal widget opens a modal window which is triggered on the click or load event of the element.


Attributes

widgetThe given widget will open in the modal window
headerThe heading for the modal window.
modalidBy default, a random string is used as modal id. You can override that by passing this attribute.
eventEvent that will trigger this modal. Default is click. Available values are 'click'and 'load'

Examples

Popup a promotion image only once for user

<div ng-if="ms.page.name == 'home' && !ms.localStorage.getItem('login_popup_shown')" >
   <div ms-widget="ms.modal" data-msd-event="load" >
     <img src="https://cdn1.storehippo.com/s/5667e7d63086b2e718049ad9/ms.settings/521c4d7548c284890e000001/webp/594a155440e9fb9e592f2ba9-240x240.png"
  />
   <div ng-init="ms.localStorage.setItem('login_popup_shown', 1)" />
</div>

Show a promotion image in a popup

<div ng-if="ms.page.name == 'home'">              
   <div ms-widget="ms.modal" data-msd-event="load" >
     <img  src="https://cdn1.storehippo.com/s/5667e7d63086b2e718049ad9/ms.settings/521c4d7548c284890e000001/webp/594a155440e9fb9e592f2ba9-240x240.png" />
   </div>
</div>

Show the login and register modal window

<!-- Opens the login widget on the click of the link -->
<a href="" ms-widget="ms.modal" ms-data-header="Login" ms-data-widget="login" >Login</a>
 
<!-- Opens the register widget on the click of the link -->
<button href="" ms-widget="ms.modal" ms-data-header="Sign up" ms-data-widget="register" >Sign up</button>