HTML Modal

[Guest gnocraft]

Olá, Alguem pode me ajudar a fazer abas modal ?

[Guest Samp]

Oi! Recomendo usar o Bootstrap! 

 

1 Importe o Bootstrap em seu <header>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

2 crie um botão com este código! 

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

     Você pode editar a class="btn btn-info" ! As opções são: btn-success | btn-primary | btn-default | warning | danger | link

     Você pode editar qual modal vai aparecer, caso você crie dois modals! Edite o data-target="#mymodal" Obs: Não ertire o "#"

 

3 Agora vamos criar o modal!

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Header do Modal</h4>
      </div>
      <div class="modal-body">
        <p>Aqui dentro desta <div> ficará as informações contidas no modal!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

   Você pode editar a id="myModal" para o nome que você quiser!

  

Pronto é isso!

[Guest Fusquete]

Oi! Recomendo usar o Bootstrap! 

 

1 Importe o Bootstrap em seu <header>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

2 crie um botão com este código! 

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

     Você pode editar a class="btn btn-info" ! As opções são: btn-success | btn-primary | btn-default | warning | danger | link

     Você pode editar qual modal vai aparecer, caso você crie dois modals! Edite o data-target="#mymodal" Obs: Não ertire o "#"

 

3 Agora vamos criar o modal!

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Header do Modal</h4>
      </div>
      <div class="modal-body">
        <p>Aqui dentro desta <div> ficará as informações contidas no modal!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

   Você pode editar a id="myModal" para o nome que você quiser!

  

Pronto é isso!

E se eu não quiser em bootstrap ? Ah mizeravii

[Guest Samp]

Se quiser se aprofundar em bootstrap! Recomendo este site, tem vários tutoriais: http://www.w3schools.com/bootstrap/default.asp

 

 

E se eu não quiser em bootstrap ? Ah mizeravii

http://www.w3schools.com/howto/howto_css_modals.asp

[Guest Fusquete]

Ah mizeravi

[Thelike]

Ah mizeravi

Membro Alertado por Free-Post

[Guest Fusquete]

Membro Alertado por Free-Post

Eu ia dar quote nele ai bugou '-'