Helpcenter +918010117117 https://help.storehippo.com/s/573db3149f0d58741f0cc63b/ms.settings/5256837ccc4abf1d39000001/57614ef64256dc6851749879-480x480.png" [email protected] https://www.facebook.com/StoreHippohttps://twitter.com/StoreHippohttps://www.linkedin.com/company/hippoinnovations/https://plus.google.com/+Storehippo/posts
B4,309-10 Spaze iTech Park, Sector 49, Sohna Road, 122001 Gurgaon India

Introduction

Overview Understanding Themes Global Objects Startup Widgets

Global Widgets

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'
delayEnter 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>