Utilize Popups para captar a atenção dos utilizadores para informações ou ações críticas, oferecendo uma interação direta e imediata. Este componente é ideal para alertas, ofertas especiais, confirmações ou interações que requerem uma decisão imediata do utilizador.
Centra a atenção do utilizador num único ponto de interação, minimizando distrações.
Apresenta-se temporariamente, exigindo uma ação para ser fechado, garantindo que a mensagem seja vista.
Pode ser personalizado com diferentes tipos de conteúdo e botões de ação, adaptando-se a várias necessidades.
Incorpore Popups sempre que desejar garantir que uma informação importante não passe despercebida, melhorando a comunicação e a interação com os utilizadores de forma efetiva e controlada.
Popup de Texto
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<button class="openPopup gra-btn btn-primary" data-id-popup="popupText">Abrir Popup Texto</button>
<div class="gra-popup" id="popupText">
<div class="popupMask"></div>
<div class="popupContainer">
<div class="popupHeader no-border">
Ut enim ad minim veniam quis nostrud
</div>
<div class="popupContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Lorem ipsum
</label>
</div>
</div>
<div class="popupFooter">
<div class="gra-hr-horizontal-dark-s gra-padding-bottom-xs"></div>
<div>
<button type="button" class="gra-btn btn-secondary gra-margin-right-xs closePopup">Cancelar</button>
<button type="button" class="gra-btn btn-primary">Primário</button>
</div>
</div>
</div>
</div>
Popup de Código
Foi enviado um código de validação para o seguinte e-mail: [email protected]
Não recebeu o código? Clica aqui para reenviar
<button class="openPopup gra-btn btn-primary" data-id-popup="popupCode">Abrir Popup Código</button>
<div class="gra-popup" id="popupCode">
<div class="popupMask"></div>
<div class="popupContainer">
<div class="popupHeader no-border with-avatar">
<div class="graAvatarWithoutFoto">
<i class="icon-user graAvatarLogo"></i>
</div>
Ut enim ad minim veniam quis nostrud
</div>
<div class="popupContent align-center">
<p>Foi enviado um código de validação para o seguinte e-mail: <b>[email protected]</b></p>
<div class="gra-input-group-code">
<input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
<input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
<input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
<input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
<input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
<input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
</div>
<p class="gra-margin-top-xs">Não recebeu o código? <a href="#" class="gra-link">Clica aqui para reenviar</a></p>
</div>
<div class="popupFooter">
<div class="gra-hr-horizontal-dark-s gra-padding-bottom-xs"></div>
<div>
<button type="button" class="gra-btn btn-secondary gra-margin-right-xs closePopup">Cancelar</button>
<button type="button" class="gra-btn btn-primary">Primário</button>
</div>
</div>
</div>
</div>
A altura máxima do popup será de 700px, sempre que o conteúdo exceder este tamanho deverá ser colocado o scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<button class="openPopup gra-btn btn-primary" data-id-popup="popupScroll">Abrir Popup Scroll</button>
<div class="gra-popup" id="popupScroll">
<div class="popupMask"></div>
<div class="popupContainer">
<div class="popupHeader">
Ut enim ad minim veniam quis nostrud
</div>
<div class="popupGradient"></div>
<div class="popupContent">
<div class="gra-row-bs">
<div class="gra-col-bs-xl-2">
<label for="default">Título do campo</label>
<input class="form form-control" type="text" placeholder="Introduza aqui o texto">
</div>
<div class="gra-col-bs-xl-2">
<label for="default">Título do campo</label>
<select class="gra-select gra-simple-select form-select">
<option value="" selected>Selecione</option>
<option value="lorem1">Lorem ipsum 1</option>
<option value="lorem2">Lorem ipsum 2</option>
<option value="lorem3">Lorem ipsum 3</option>
<option value="lorem4">Lorem ipsum 4</option>
</select>
</div>
</div>
<div class="gra-row-bs gra-margin-top-m">
<div class="gra-col-bs-xl-2">
<label for="default">Título do campo</label>
<input class="form form-control" type="text" placeholder="Introduza aqui o texto">
</div>
<div class="gra-col-bs-xl-2">
<label for="default">Título do campo</label>
<select class="gra-select gra-simple-select form-select">
<option value="" selected>Selecione</option>
<option value="lorem1">Lorem ipsum 1</option>
<option value="lorem2">Lorem ipsum 2</option>
<option value="lorem3">Lorem ipsum 3</option>
<option value="lorem4">Lorem ipsum 4</option>
</select>
</div>
</div>
<div class="gra-margin-top-m">
<label for="default">Título do campo</label>
<textarea class="form form-control" rows="4" type="text" placeholder="Introduza aqui o texto"></textarea>
</div>
<p class="gra-margin-top-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="gra-margin-top-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="form-check gra-margin-top-m">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Lorem ipsum
</label>
</div>
</div>
<div class="popupFooter">
<div class="gra-hr-horizontal-dark-s gra-padding-bottom-xs"></div>
<div>
<button type="button" class="gra-btn btn-secondary gra-margin-right-xs closePopup">Cancelar</button>
<button type="button" class="gra-btn btn-primary">Primário</button>
</div>
</div>
</div>
</div>
Popup com Imagem
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<button class="openPopup gra-btn btn-primary" data-id-popup="popupImagem">Abrir Popup Imagem</button>
<div class="gra-popup" id="popupImagem">
<div class="popupMask"></div>
<div class="popupContainer">
<div class="popupImg">
<img src="/img/exemplos/coroa-da-mata-pm.jpg">
</div>
<div class="popupHeader no-border">
Ut enim ad minim veniam quis nostrud
</div>
<div class="popupContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="popupFooter">
<div class="gra-hr-horizontal-dark-s gra-padding-bottom-xs"></div>
<div>
<button type="button" class="gra-btn btn-secondary gra-margin-right-xs closePopup">Cancelar</button>
<button type="button" class="gra-btn btn-primary">Primário</button>
</div>
</div>
</div>
</div>