Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Modal

Boxes simplificados e flexíveis de diálogo que necessitam do minímo de funcionalidades para funcionar.

Criando modal

Você precisa passar no data-target o ID da modal.

Nome Tipo Tipo Descrição
target #myTarget obrigatório

Abre a modal com o mesmo nome do target

Criando modal via template

Para criar uma modal via template, você não precisa passar o data-target, somente os atributos abaixo. Nesse caso, o próprio elemento que aciona a modal, irá montar o código automaticamente a partir do nosso template.

1

<button data-ls-module="modal" data-action="http://locaweb.com.br/" data-content="<h2>Título feito dentro do data-content</h2><p>Conteúdo feito dentro do data-content</p>" data-title="Este título é o atributo data-title" data-class="ls-btn-danger" data-save="Salvar" data-close="Fechar" class="ls-btn-primary"> Modal sem target </button>
Nome Tipo Padrão Descrição
content um texto curto --

Abre a modal com o texto inserido
title um titulo curto --

Abre a modal com o titulo inserido
save texto --

Coloca um texto no botão de salvar
close texto --

Coloca um texto no botão de fechar
action link --

Coloca um link no botão de salvar
class texto --

Coloca uma classe no botão de salvar
data-custom-attrs texto --

Adiciona qualquer novo atributo no botão(type='button') ou no link
data-action-type link/form --

Se for link não é adicionado form nem button de submit, caso contrário terá um form e o submit será um button.

Atenção: Lembre de não passar o atributo data-target caso queira abrir uma modal via template, pois a presença desse atributo no elemento faz com que somente seja direcionada a abertura do modal para um target.

Acessibilidade

Via javascript, o modal recebe focus() e o atributo tabindex="-1" além de ser adicionada as ARIAs abaixo:

Estado do modal Elemento Wai-aria
Escondido .ls-modal aria-hidden="true"
Exibindo .ls-modal aria-hidden="false"
Aberto/Fechado .ls-modal role="dialog"
Aberto/Fechado .ls-modal aria-labelledby="ID_DO_TITULO"

Abrindo a modal via URL

Para abrir a modal automaticamente assim que a página for carregada, basta passar na URL o nome da modal. Tente aqui mesmo, no final da URL desta página, adicione #myAwesomeModal e aperte ENTER.

Modal title

Natus quia voluptatem iure quos voluptates fuga corporis delectus dignissimos debitis inventore. Doloremque autem neque aut impedit qui omnis. Quaerat voluptatem inventore dolorem. Voluptatem et quo error a deleniti et sapiente sapiente. Amet accusamus sed et enim optio at. Harum ullam corrupti ea. Suscipit ipsum accusantium omnis consequatur in occaecati consequatur officia non consequuntur. Beatae laborum ab temporibus nisi voluptas aut cumque tempore consequatur molestiae. Incidunt quisquam autem molestiae. Assumenda ipsam et ad tempora et et labore omnis. Voluptatem reiciendis veniam fugit numquam soluta aspernatur voluptas ratione. Quia deleniti et nulla dicta aut soluta debitis magni. Harum et iusto reiciendis eveniet corporis non ex et. Veniam voluptas repellat velit in nihil modi eos eum quia et qui cumque. Et maxime molestiae dolorem et

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<button data-ls-module="modal" data-target="#myAwesomeModal" class="ls-btn-primary">Ative a modal</button>

<div class="ls-modal" id="myAwesomeModal">
  <div class="ls-modal-box">
    <div class="ls-modal-header">
      <button data-dismiss="modal">&times;</button>
      <h4 class="ls-modal-title">Modal title</h4>
    </div>
    <div class="ls-modal-body" id="myModalBody">
      <p>Assumenda exercitationem voluptatem dolorem delectus et ut deleniti omnis nulla. Eum a aut ut illo eius aliquam dolorum quibusdam. Tempora dolorem temporibus aut est dolor minima placeat consequuntur non vitae amet quas aut impedit. Minus consequatur quas doloremque quia beatae velit accusamus assumenda quia. Quas necessitatibus velit repellendus dolor cupiditate debitis dolor tempora sint sed magni nesciunt velit quas. Suscipit sequi corrupti laborum quam fugit vel repellendus. Laborum expedita non veritatis natus. Est voluptates est iste et sed quis. Reiciendis a ut dolore maxime et aut consequuntur laudantium velit sit quidem dolor eos. Nesciunt assumenda rerum placeat atque quia commodi quas aliquid et mollitia ullam facilis tempore repellat. Laborum enim sed possimus eos quam eum ratione aut et maiores minima dolorem eveniet voluptatibus. Molestiae sed explicabo officiis. Expedita molestiae provident et officia. Voluptatem ea nulla quae deserunt laboriosam sed error consequatur rerum sit ipsam. Ratione quis et et et labore consequuntur quod iure</p>
    </div>
    <div class="ls-modal-footer">
      <button class="ls-btn ls-float-right" data-dismiss="modal">Close</button>
      <button type="submit" class="ls-btn-primary">Save changes</button>
    </div>
  </div>
</div><!-- /.modal -->

Abrindo a modal via javascript

1

locastyle.modal.open("#myAwesomeModal");

Atenção: Você deve sempre especificar o target do modal em seu javascript.

Abrindo a modal via css class

1

<div class="ls-modal ls-opened" id="myAwesomeModal">

Atenção: Você deve sempre especificar o css class .ls-opened do modal, no mesmo lugar do .ls-modal.

Modal sempre ativa depois de aberta

Se você quer manter uma modal sempre ativa depois de aberta, basta inserir esse código data-modal-blocked na sua modal, no mesmo elemento onde fica a .ls-modal.

1

<div class="ls-modal" data-modal-blocked id="myAwesomeModal">

Atenção: Se você for fechar sua modal depois de uma determinada ação, você precisa chamar locastyle.modal.close()

Modal grandes e pequenas

Se precisar de uma modal menor ou maior, basta usar a classe .ls-modal-small ou .ls-modal-large.

Modal title

Aut sunt voluptates explicabo tenetur impedit natus vero voluptas vitae. Nemo et sunt vitae debitis dolor quibusdam minus eum autem. Et facere magni velit et repudiandae praesentium neque culpa

Modal title

In eos consectetur laborum eos et. Cupiditate ea optio ut necessitatibus eveniet officia aut numquam eos. Dolor quia qui at

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<button data-ls-module="modal" data-target="#modalSmall" class="ls-btn-primary">Ative a modal pequena</button>
<button data-ls-module="modal" data-target="#modalLarge" class="ls-btn-primary">Ative a modal grande</button>

<div class="ls-modal" id="modalSmall">
  <div class="ls-modal-small">
    <div class="ls-modal-header">
      <button data-dismiss="modal">&times;</button>
      <h4 class="ls-modal-title">Modal title</h4>
    </div>
    <div class="ls-modal-body">
      <p>Labore cum exercitationem aperiam et ducimus ex eligendi est aut. Qui pariatur blanditiis ea odit repellat recusandae magni ut omnis. Sit repellat sint maiores fuga quis fugiat qui architecto facilis consequatur quas</p>
    </div>
    <div class="ls-modal-footer">
      <button class="ls-btn ls-float-right" data-dismiss="modal">Close</button>
      <button type="submit" class="ls-btn-primary">Save changes</button>
    </div>
  </div>
</div>


<div class="ls-modal" id="modalLarge">
  <div class="ls-modal-large">
    <div class="ls-modal-header">
      <button data-dismiss="modal">&times;</button>
      <h4 class="ls-modal-title">Modal title</h4>
    </div>
    <div class="ls-modal-body">
      <p>Qui quasi ea saepe debitis nemo natus qui aliquam eum impedit est adipisci eius saepe. Modi eos ut maxime eos provident assumenda corporis. Vel ad ullam aut iure temporibus unde et quod</p>
    </div>
    <div class="ls-modal-footer">
      <button class="ls-btn ls-float-right" data-dismiss="modal">Close</button>
      <button type="submit" class="ls-btn-primary">Save changes</button>
    </div>
  </div>
</div>

Eventos

Você pode utilizar os eventos abaixo para um determinado momento do modal, veja a referência abaixo:

Evento Descrição
modal:opened

Quando um modal é aberto por completo, o evento modal:opened é disparado com dois argumentos: o primeiro argumento é o evento. O segundo argumento é o botão que foi clicado.
modal:closed

Quando um modal é fechado por completo, o evento modal:closed é disparado com um argumento: o único argumento é o event.

Para acessar o conteúdo do modal, basta usar o this.

Exemplo: 

1
2
3
4
5
6
7
8
9

// Um modal específico pelo ID
$('body').on('modal:opened', '#myAwesomeModal', function(evt, button){
  console.log(evt, button, this);
});

// Todos os elementos de modal
$('body').on('modal:closed', '.ls-modal', function(evt){
  console.log(evt, this);
});

Append To no modal

Caso deseja abrir o modal fora do escopo, basta usar o atributodata-append-to (que é opcional) passando a referência de onde ele será aberto

O valor do atributo data-append-to pode ser uma tag, classe ou ID, conforme exemplo abaixo:

1
2
3

<button data-ls-module="modal" data-target="#modalAppend" data-append-to="body" class="ls-btn-primary">Abrir do body</button>
<button data-ls-module="modal" data-target="#modalAppend" data-append-to=".classe-do-elemento" class="ls-btn-primary">Abrindo dentro da classe</button>
<button data-ls-module="modal" data-target="#modalAppend" data-append-to="#ID-do-element0" class="ls-btn-primary">Abrindo dentro do ID</button>

Modal aberto no fim do body

O valor do atributo data-append-to definiu aonde esse Modal foi aberto.