Placing a div inside a dialog box

问题

I am creating a jQuery plugin which shows the user a bar graph when a user selects a table on a webpage. I am able to render the table on the same page. Is there any way I can put this table in a dialog box? I have never worked with dialog box so I instead tried putting a div in a new window using :

var popup = window.open('about:blank','instructions','width=300,height=200');
popup.onload = function() {
    jQuery(popup.document.body).append(".chart");
}

where my div is <div class="chart"></div>

But it just opens a blank window.

This is my working jsfiddle that renders the chart on the same page:

function getSelected() {
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.getSelection) {
        return document.getSelection();
    } else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text;
        }
        return false;
    }
    return false;
}
$( "table" ).on('click', function() {
    var selection = getSelected();

    if (selection) {
        var data = [];
        var vals = $('#test').find('td').filter(function () {
            //get only <td> that contain numeric value inside it
            return $.isNumeric(this.innerHTML);
        }).each(function (i, val) {
            data.push(val.innerHTML);
        });
var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });
     //alert(data);
    }
});

    .chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

<div class="chart"></div>
  <table id="test" style="width:100%">
    <tbody><tr>
        <td>Jill</td>
        <td>21</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>13</td>
        <td>94</td>
    </tr>
</tbody></table>

Any help is appreciated. Thanks.

回答1:

As far as javascript dialog boxes, your options are somewhat limited to what you can do. For example, a line break <br/> cannot be used with a dialog box. You would have to use the new line character \n. If you need to render some sort of HTML in a "box" I would recommend using something different such as fancy box. Here is link to view some examples. It supports a wide range of things such as images, videos and static HTML.

http://fancyapps.com/fancybox/#examples

来源：https://stackoverflow.com/questions/26987586/placing-a-div-inside-a-dialog-box