CODEWITHSUNDEEP
javascriptjqueryhtml
rohit singh
rohit singh

Reputation: 590

How to open a contents of a div in a popup using jquery?

I have a small div with less height because of that I have a long scrollbar for that.

I want to do something like if the user clicks on the div then the content of the div should open in a popup.

But if I apply popup to that div then it will be not visible on click as popup hides the div.

enter image description here

Above is the div with white background. As it has a long scrollbar I want to show the content of that div in a popup. How to pursue?

Upvotes: 1

Views: 3456

Answers (4)

noobed
noobed

Reputation: 1339

For simplicity you might want to use Jquery UI

and the code goes as simple as:

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

For more options on the dialog refer to the official documentation.

Upvotes: 1

rohit singh
rohit singh

Reputation: 590

I added an empty div #divPopupMessage and on click on the main div #messagediv i called the below jquery function

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

        });

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

Upvotes: 0

Jegan
Jegan

Reputation: 595

  1. Use bootstrap Modal for popup to show your message.

    <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. Write below code to show popup modal with your text. 

    $('#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');         
});

Upvotes: 0

Fabjan
Fabjan

Reputation: 13676

Not really sure what is this question about but generally speaking pop-ups are just divs with id/name/class set and 'display : none' option set in styles. Also somewhere in your code there is a function that makes it visible for some time like:

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

Also as noobed said you can use $('selector').hide(); $('selector').show();

Upvotes: 1

Related Questions