Question

我有一个较小的div，因为我有一个很长的滚动条。

我想做一些事情，比如用户点击div然后div的内容应该在弹出窗口中打开。

但是如果我将弹出窗口应用于该div，那么它将在点击时不可见，因为弹出窗口会隐藏div。

enter image description here

以上是具有白色背景的div。因为它有一个长滚动条我想在弹出窗口中显示该div的内容。如何追求？

Answer 1

为简单起见，您可能需要使用Jquery UI

代码简单如下：

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

有关对话框的更多选项，请参阅官方文档。

Answer 2

不确定这个问题是什么，但一般来说弹出窗口只是带有id / name / class set的div和样式中设置的'display：none'选项。在代码的某处，还有一个函数可以让它在一段时间内可见：

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

同样正如noobed所说，你可以使用$（'selector'）。hide（）; $（ '选择'）显示（）;

Answer 3

使用bootstrap Modal弹出窗口显示您的消息。

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

编写下面的代码，用您的文字显示弹出模式。

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

如何使用jquery在弹出窗口中打开div的内容？

4 个答案: