Modals

These modular elements can be readily used and customized across pages and in different blocks.

Explore all of Stack’s modular elements
at the Element Index Page →

Note: Modals are now fully compatible with Variant thanks to our new free plugin, Stack Modals. For details and download see this blog post.
×

Basic Modal

Modals in Stack are easy to set up and trigger from any element on the page. At their most basic usage, an element with class .modal-trigger inside the same .modal-instance triggers the modal to appear.

Trigger Modal

Here is a basic text modal

Stack’s visual style is simple yet distinct, making it an ideal starting point for your project whether it be a basic marketing site, or multi-page company presence.

Autoshow Modal

Modals can be triggered automatically after a period of time once the page has been loaded by adding data-autoshow=»» to the .modal-container element. The attribute requires a numerical value in milliseconds, ie. a value of 1000 would show the modal 1 second after the page has loaded.

Trigger Modal

Here is an autoshow modal

Stack’s visual style is simple yet distinct, making it an ideal starting point for your project whether it be a basic marketing site, or multi-page company presence.

Cookies Enabled Modal

Adding attribute data-cookie to any modal container will make the modal a one-time modal. When the modal is dismissed, a browser cookie is set, and the modal is permanently dismissed. Any future page views will not show the modal. The cookie will suppress modals shown via triggers and via autoshow. The text set in the `data-cookie` modal will be used as the name for the cookie.

The one-time modal is handy to alert users to a message which they can «accept» or «agree» to, such as an EU Cookies law notice, a promo/sale or a newsletter signup offer.

Exit Modal

«Exit» modals can be used to draw the user’s attention to a promotion or any other alert when their mouse leaves a particular element on the page. Exit modals use the data-show-on-exit attribute to set a selector matching the element where the user’s mouse must exit to show the modal. This means that you could set this selector to match your «Check Out» button, the body of the page, or even a single section on your page so the modal shows when the user scrolls past it. You could also use an exit modal to draw attention back to the page when the user’s mouse leaves the browser window.

An «exit modal» will show immediately, each time your mouse leaves this box.

Trigger Modal

This is an exit modal

With Stack, you can easily configure modals to appear when your user’s mouse leaves a specific element.

Aviso importante

Capital Strategies Partners, A.V., S.A. (CSP) ha sido informada de que personas físicas están recibiendo llamadas y correos electrónicos en lo que se utiliza fraudulentamente el nombre de CSP, llegándose a reproducir membretes, sellos y firmas falsas de CSP. En algunos casos dichas comunicaciones incluyen recomendaciones de compra de acciones o incluso documentos contractuales y solicitud de pago.

Frente a estas acciones fraudulentas, CSP  ha puesto en marcha una serie de actuaciones:

  • Comunicación de los hechos a la Comisión Nacional del Mercado de Valores.
  • Denuncia ante la Unidad Central de Ciberdelincuencia de la Comisaría General de la Policía Judicial.
  • Comunicación a la Agencia Española de Patentes y Marcas.

Si usted recibe un correo electrónico o es destinatario de otro tipo de comunicación en la que se le proponga inversiones en instrumentos financieros, se solicite información confidencial, económica o personal, números de cuenta o se le inste a suscribir contratos o facilitar cualquier otro tipo de datos, rogamos que, por favor, lo pongan en nuestro conocimiento o directamente se ponga en contacto con la CNMV o, en su caso, con el organismo supervisor local si las acciones no se produjesen en España, para así tener la seguridad de que el remitente se trata de una persona autorizada, registrada y supervisada. Podría tratarse de un intento de fraude suplantando la imagen de Capital Strategies Partners A.V., S.A.

Capital Strategies Partners, A.V., S.A. (CSP) has been informed that individuals are receiving calls and e-mails fraudulently using CSP’s name, including the reproduction of CSP’s letterhead, stamps and forged signatures. In some cases these communications include recommendations to purchase shares or even contractual documents and requests for payment.

In response to these fraudulent actions, CSP has taken a number of steps:

  • Notification of the facts to the National Securities Market Commission (CNMV).
  • Complaint to the Central Cybercrime Unit of the General Commissariat of the Judicial Police.
  • Notification to the Spanish Patent and Trademark Agency.

If you receive an e-mail or are the recipient of any other type of communication proposing investments in financial instruments, requesting confidential, financial or personal information, account numbers or urging you to sign contracts or provide any other type of data, please bring it to our attention or contact the CNMV or, where applicable, the local supervisory body if the actions do not take place in Spain, in order to ensure that the sender is an authorised, registered and supervised person. This could be an attempt to defraud by impersonating Capital Strategies Partners A.V., S.A.