ms.modal

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

Attributes

Attributes

widget	The given widget will open in the modal window
header	The heading for the modal window.
modalid	By default, a random string is used as modal id. You can override that by passing this attribute.
event	Event that will trigger this modal. Default is click. Available values are 'click'and 'load'
delay	Enter the delay in milliseconds in case of load event. The modal will load after the specified delay

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>
</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>

Introduction

Global Widgets

ms.modal

Attributes

Examples

Popup a promotion image only once for user

Show a promotion image in a popup

Show the login and register modal window