Callouts and prompts

Modals

Make

		Make

			<a class="btn btn--alpha btn--small modal__trigger" data-modal-id="modal-make" data-modal-title="Weet je het zeker?" data-modal-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-modal-close-btn="sluiten">Make</a>

Confirm

You can go both ways with the confirm modal. You could call it from your HTML with data attributes or you could call it from Javascript. If you use Javascript you can set a callback function, this function will trigger when the modal has opened.

HTML

		Confirm

			<a class="btn btn--alpha btn--small modal__trigger" data-modal-id="modal-make2" data-modal-title="Weet je het zeker?" data-modal-close-btn="annuleren" data-modal="confirm" data-modal-confirm-action="http://www.google.nl" data-modal-confirm-btn="Ja, verwijder">Confirm</a>

Javascript call

    app.modal.confirm({
    modalTitle: 'title', // Title printed in the modal (optional)
    modalText: 'text', // Text to explain the action (optional)
    modalConfirmAction: 'http://google.nl', // URL for the confirm button
    modalConfirmBtn: 'bevestigen', // Confirm button text (optional, default: bevestigen)
    modalCloseBtn: 'annuleren', // Cancel button text (optional, default: annuleren)

    modalOpenCallback: function () {
        // Do magic here..
    }
});
  

Static

			<a class="btn btn--alpha btn--small modal__trigger" data-modal-id="modal-static">Static</a>
<div id="modal-static" class="modal">
    <div class="modal__content">
        <a class="modal__close" data-modal-close></a>
        <h2>Dit is een titel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        <a href="#link" class="btn btn--beta btn--medium" data-modal-close>Akkoord</a>
    </div>
</div>
		

Open

Function to open a modal from Javascript.

app.modal.openModal(this, options);

Close

Function to close an open modal.

app.modal.closeModal();

Notifications

Alpha

Je abonnement loopt af op 23-02-2014. Verleng je abonnment.
Deze account gegevens zijn niet bij ons bekend.
Je bent nu geregistreerd op onze website.

			<div class="notification notification--alpha">
    <div class="notification__text">Je abonnement loopt af op 23-02-2014. <a href="#link">Verleng je abonnment</a>.</div>
    <button class="notification__close" data-notification-close></button>
</div>
<div class="notification notification--alpha notification--error">
    <div class="notification__text">Deze account gegevens zijn niet bij ons bekend.</div>
    <button class="notification__close" data-notification-close></button>
</div>
<div class="notification notification--alpha notification--success">
    <div class="notification__text">Je bent nu geregistreerd op onze website.</div>
    <button class="notification__close" data-notification-close></button>
</div>
		

Beta

Je abonnement loopt af op 23-02-2014. Verleng je abonnment.
Deze account gegevens zijn niet bij ons bekend.
Je bent nu geregistreerd op onze website.

			<div class="notification notification--beta">
    <div class="notification__text">Je abonnement loopt af op 23-02-2014. <a href="#link">Verleng je abonnment</a>.</div>
    <button class="notification__close" data-notification-close></button>
</div>
<div class="notification notification--beta notification--error">
    <div class="notification__text">Deze account gegevens zijn niet bij ons bekend.</div>
    <button class="notification__close" data-notification-close></button>
</div>
<div class="notification notification--beta notification--success">
    <div class="notification__text">Je bent nu geregistreerd op onze website.</div>
    <button class="notification__close" data-notification-close></button>
</div>
		

Add

You can call this function to insert a notification in the DOM.

app.notifications.add(target, message, size, type);

target: notification container {string selector}
message: message to be shown {string}
size: alpha, beta {string}
type: success, error, info {string}

Tooltips

Tooltips are used as fancy title attributes to display some info about a certain section.

Top position

		top

			<a class="btn btn--alpha btn--small tooltip" data-tooltip-position="top" title="Kids don't turn rotten just from watching TV. Why not indeed! Yeah, I do that with my stupidness.">top</a>

Right position

		right

			<a class="btn btn--alpha btn--small tooltip" data-tooltip-position="right" title="Kids don't turn rotten just from watching TV. Why not indeed! Yeah, I do that with my stupidness.">right</a>

Bottom position

		bottom

			<a class="btn btn--alpha btn--small tooltip" data-tooltip-position="bottom" title="Kids don't turn rotten just from watching TV. Why not indeed! Yeah, I do that with my stupidness.">bottom</a>

Left position

		left

			<a class="btn btn--alpha btn--small tooltip" data-tooltip-position="left" title="Kids don't turn rotten just from watching TV. Why not indeed! Yeah, I do that with my stupidness.">left</a>

Click trigger

		click trigger

			<a class="btn btn--alpha btn--small tooltip" data-tooltip-position="top" title="Kids don't turn rotten just from watching TV. Why not indeed! Yeah, I do that with my stupidness." data-tooltip-trigger="click">click trigger</a>