I wanted to have more than one bootstrap modal on the same page

Navigation
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>

IwanttoputanotheroneonthesamepagebutitalwaysopenstheoneIuploadedfirst

Here'showtoorder:

link

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><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
asked by anonymous 10.04.2016 / 14:24

2 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 to the id of another modal you want.

I edited your fiddle to exemplify: link

    
10.04.2016 / 17:13
1

To have more than one modal on the same page, just have one ID for each! And so respectively call them on 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><divclass="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>
    
10.04.2016 / 17:21
Error in Sql Server: is not a recognized function name How to stop a loop using the input provided by the user?