Show Popup double clic de la zone de texte

J'ai un gridview avec quelques colonnes avec textboxes dans chaque colonneShow Popup double clic de la zone de texte

   ------------------------------------------- 
       | Row1  | Row2  | Row3  | 
       ------------------------------------------- 
       | TextBox1 | TextBox2 | TextBox3 | 
       -------------------------------------------

HTML:

<Columns> 
    <asp:TextBox ID="TextBox1" runat="server" CssClass="openPopup"></asp:TextBox> 
    <asp:TextBox ID="TextBox2" runat="server" CssClass="openPopup"></asp:TextBox> 
    <asp:TextBox ID="TextBox3" runat="server" CssClass="openPopup"></asp:TextBox> 
    </Columns>

Quand je double click sur le textbox avec différents ID s je veux pour afficher une fenêtre modale bootstrap

Je l'ai essayé, mais il ne fonctionne pas

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('.openPopup').dblclick(function() { 
       $('#Div2').modal('show'); 
      }); 
     }); 
     </script>

Source

2015-08-28 Dheeraj Patnaik

Vous pouvez utiliser le bootstrap modal pour créer le menu contextuel. Puis lier à celui class ou id vous souhaitez à l'intérieur du modal pour afficher les données de passage. Enfin, à l'intérieur du modal, utilisez $(e.target).html() pour saisir les données sur lesquelles vous avez cliqué deux fois.

Je vous recommande fortement, si vous le pouvez, d'utiliser angularJS ou backboneJS pour vous aider à créer une meilleure expérience utilisateur en face avant.

$('tr').on('dblclick', function(e) { 
 

 
      $('#addModal').modal('show'); 
 
      $(".modal-body #dataToDisplay").text($(e.target).html()); 
 
    
 
     });

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-body"> 
 
        <h1 id="dataToDisplay"></h1> 
 
       </div> 
 
       
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 

 
    <table class="table table-bordered"> 
 
     <tr> 
 
      <td>1st Table Row</td> 
 
      <td>2nd Table Row</td> 
 
     </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

Source

2015-08-28 17:17:51 Dayan

Quelle que soit la 'textbox' je clique, je dois obtenir le pupop, je ne peux pas donner un' Id' –

spécifique Sera-ce la même pop-up statique pour toutes les zones de texte ou un personnalisé individuellement un pour chaque? – Dayan

Oui, mais le 'modal popup' contient une zone de texte dans le' modal-body', où il doit afficher le texte du double-clic 'textbox' –

Show Popup double clic de la zone de texte

Répondre

Questions connexes