Как открыть содержимое div в всплывающем окне с помощью jquery?

Question

У меня есть небольшой div с меньшей высотой, потому что для этого у меня длинная полоса прокрутки.

Я хочу сделать что-то вроде, если пользователь нажимает на div, тогда содержимое div должно открываться во всплывающем окне.

Но если я применил всплывающее окно к этому div, то оно не будет видно по щелчку, поскольку всплывающее окно скрывает div.

Выше ДИВ с белым фоном. Поскольку у него длинная полоса прокрутки, я хочу показать содержимое этого div в всплывающем окне. Как преследовать?

Answer 1

Не совсем уверен, что это за вопрос, но, вообще говоря, всплывающие окна - это просто divs с набором id/name/class и опция «display: none» в стилях. Также где-то в вашем коде есть функция, которая делает его видимым на некоторое время, как:.

$('#yourDivId').toggle() or $('#yourDivId').css('display', 'block'); 
$('#yourDivId').css('display', 'none'); 

Кроме того, как noobed сказал вы можете использовать $ («селектор») скрыть(); $ ('Селектор') шоу().

Answer 2

Для простоты вы можете использовать Jquery UI

и код идет просто:

$(function() { 
    $("#dialog").dialog(); 
}); 

Дополнительные опции в диалоговом окне обратитесь к официальной документации.

Answer 3

1. Использовать бутстрап Модаль для всплывающего окна, чтобы показать ваше сообщение.

   <div class="modal fade" id=""> 
       <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title">Modal title</h4> 
        </div> 
        <div class="modal-body"> 
        <p>One fine body&hellip;</p> 
        </div>    
       </div><!-- /.modal-content --> 
       </div><!-- /.modal-dialog --> 
   </div><!-- /.modal --> 
   

2. Запишите код ниже, чтобы показать всплывающее окно с текстом.

   $('#divSelector').click(function(){ 
       var textToDisplay = $(this).val(); // This is for input boxes, if u want to show div contents use text() 
       $('.modal-body').text(textToDisplay); 
       $('#popup').modal('show');   
   }); 
   

Answer 4

Я добавил пустой DIV #divPopupMessage и по щелчку на главном DIV #messagediv я назвал ниже функции Jquery

$(function() { 
     $("#divPopupMessage").dialog({ 
      autoOpen: false, 
      title: "Inbox", 
      draggable: true, 
      resizable: true 

     }); 

     $('#messagediv').click(function() { 
      $("#divPopupMessage").text($('#messagediv').text()); 
      $("#divPopupMessage").dialog("open"); 
     }); 
    });