I wish I had more than one bootstrap modal on the same page

Asked

Viewed 3,498 times

2

     <div class="container">
    <img src="../imagens/editar_3.png" style="cursor:hand" title="Editar Info" data-toggle="modal" data-target="#myModal">
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-sm">  
    <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;         </button>
      <h4 class="modal-title" style="color:black">Editar email</h4>
    </div>
    <div  class="modal-body">
        <center>
            <form name="ed_em" method="post">
            <table>
                <tr>
                    <td style="color:black">Email </td>
                    <td style="color:black"><input type="text" name="mail" placeholder="email" value=<? echo $email;?>></td>
                    </tr>
                <tr>
                    <td style="color:black">Palavra_passe </td>

                    <td style="color:black"><input name="pass" type="password" placeholder="obrigatoria"></td>
                </tr>
                </table>
            <br>
            <input type="submit" name="editar_email" value="Editar email">
            </form>
        </center>
</div>
        </div>
        </div>
     </div>
</div>

inserir a descrição da imagem aqui

I belong to put another on the same page but always open what you loaded first

Here as requested:

https://jsfiddle.net/69kn48c3/

this is the head of the page

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <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>
html twitter-bootstrap

  • You could show the full code on http://jsfiddle.net ?

3 answers

2


The data-target attribute identifies the element in which you find the modal you want to open. Just change the data-target to point out the id of another modal you want.

I edited your fiddle to illustrate: https://jsfiddle.net/69kn48c3/2/

1

To have more than one modal on the same page just have one ID for each! And so respectively call for them in each buttom in the attribute data-target="#myModal" and data-target="#myModal2".

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Document</title>


	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
</head>
<body>
	<div class="container">
     <button style="cursor:hand;height:30px;width:100px" title="Editar Info"     data-toggle="modal" data-target="#myModal">Click</button>
<button style="cursor:hand;height:30px;width:100px" title="Editar Info" data-toggle="modal" data-target="#myModal2">Click 2</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" style="color:black">Editar email</h4>
        </div>
        <div class="modal-body">
          <center>
            <form name="ed_em" method="post">
              <table>
                <tr>
                  <td style="color:black">Email </td>
                  <td style="color:black">
                    <input type="text" name="mail" placeholder="email">
                  </td>
                </tr>
                <tr>
                  <td style="color:black">Palavra_passe </td>

                  <td style="color:black">
                    <input name="pass" type="password" placeholder="obrigatoria">
                  </td>
                </tr>
              </table>
              <br>
              <input type="submit" name="editar_email" value="Editar email">
            </form>
          </center>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal 2 -->
  <div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" style="color:black">Modal 2</h4>
        </div>
        <div class="modal-body">
          <center>
            <form name="ed_em" method="post">
              <table>
                <tr>
                  <td style="color:black">Email modal 2 </td>
                  <td style="color:black">
                    <input type="text" name="mail" placeholder="email">
                  </td>
                </tr>
                <tr>
                  <td style="color:black">Senha mmodal 2 </td>

                  <td style="color:black">
                    <input name="pass" type="password" placeholder="obrigatoria">
                  </td>
                </tr>
              </table>
              <br>
              <input type="submit" name="editar_email" value="Editar dados modal 2">
            </form>
          </center>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

0

I have the same problem, but I use the Yii framework, so it automatically generates modal, only with an ID, so when it opens the first

Browser other questions tagged html twitter-bootstrap

You are not signed in. Login or sign up in order to post.