Показать всплывающее окно по двойному щелчку Textbox

У меня есть gridview с несколькими столбцами с textboxes в каждой колонкеПоказать всплывающее окно по двойному щелчку Textbox

Для Ex

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

Когда я double click на textbox с различными ID s Я хочу Чтобы отобразить bootstrap модальных всплывающее окно

Я попытался это, но он не работает

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

источник

2015-08-28 Dheeraj Patnaik

Вы можете использовать загрузчик modal для создания всплывающего окна. Затем привяжите в зависимости от того, какой из class или id вы хотите внутри модального отображения отображаемых данных. Наконец, внутри модального использования $(e.target).html(), чтобы получить данные двойного щелчка.

Я настоятельно рекомендую, если можно, используя angularJS или backboneJS, чтобы помочь вам создать лучший интерфейс пользователя на передней панели.

$('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>

источник

2015-08-28 17:17:51 Dayan

Который когда-либо 'textbox' я нажимаю я должен получить pupop, я не могу предоставить конкретный' Id' –

Будет ли это то же статическое всплывающее окно для всех текстовых полей или индивидуально настроить по одному для каждого? – Dayan

Да, но «модальное всплывающее окно» содержит текстовое поле в «модальном теле», где оно должно отображать текст двойного щелчка 'textbox' –

Показать всплывающее окно по двойному щелчку Textbox

ответ

Смежные вопросы