javascript - 按钮的 OnClick 在新窗口中显示一个 div(及其 CSS 属性)

Question

我正在构建一个网页，我希望在其中将 div 从源页面弹出到另一个页面。

我正在构建的网页的屏幕截图:

onClick of Ticker Panel Button 我希望整个 Ticker Panel div 在具有相似宽度、高度和 CSS 属性的新浏览器窗口中弹出。另外，我不想在新窗口中显示 Button。

HTML 文件:

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Ticker Panel <button class="btn btn-default pull-right ticker-pop-out" type="submit">Button</button></h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>Market Id</th>
                    <th>Ticker Price</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td><span class="badge bg-red">55%</span></td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td><span class="badge bg-yellow">70%</span></td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td><span class="badge bg-light-blue">30%</span></td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td><span class="badge bg-green">90%</span></td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td><span class="badge bg-red">55%</span></td>
                </tr>
                <tr>
                    <td>6.</td>
                    <td><span class="badge bg-yellow">70%</span></td>
                </tr>
                <tr>
                    <td>7.</td>
                    <td><span class="badge bg-light-blue">30%</span></td>
                </tr>
                <tr>
                    <td>8.</td>
                    <td><span class="badge bg-green">90%</span></td>
                </tr>
                <tr>
                    <td>9.</td>
                    <td><span class="badge bg-green">90%</span></td>
                </tr>
                <tr>
                    <td>10.</td>
                    <td><span class="badge bg-red">55%</span></td>
                </tr>
                <tr>
                    <td>11.</td>
                    <td><span class="badge bg-yellow">70%</span></td>
                </tr>
                <tr>
                    <td>12.</td>
                    <td><span class="badge bg-light-blue">30%</span></td>
                </tr>
                <tr>
                    <td>13.</td>
                    <td><span class="badge bg-green">90%</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- /.box-body -->
</div>

我尝试执行以下操作:

function nWin() {
    var w = window.open();
    var html = $(".ticker-pop-out").html();
    $(w.document.body).html(html);
}

$('.ticker-pop-out').on('click', function () {
    nWin();
});

但我只在新窗口中得到“Button”作为输出。请帮忙。

Answer 1

我认为问题在于您只获得了按钮类，而不是您想要显示的类。试试这个:

function nWin() {
    var w = window.open();
    var html = $(".classYouWantToAppear").html();
    $(w.document.body).html(html);
}

您的代码:

function nWin() {
    var w = window.open();
    var html = $(".ticker-pop-out").html(); //This class reference to the button, not to the class you want to render
    $(w.document.body).html(html);
}

其中“classYouWantToAppear”类应该是您希望呈现的类。