Question

我有一个问题我使用带有弹出窗口的Angularjs创建一个html表现在我想在iframe上显示这个表一切正常但是弹出窗口显示图形在下面的div中打开我想在整个页面上打开它我的出局就像这样

我想这样

我的代码如下，我在iframe中调用的Stock.html代码

<div ng-controller="StockCtrl">
    <table class="table table-striped table-bordered table-hover table-full-width"  ng-init="firstCall()" id="Stocktable1">
        <thead>
            <tr>
                <th style="text-align:left;width:auto;">Name</th>
                <th class="hidden-xs" style="text-align:center;width:auto;">Index</th>
                <th style="text-align:center;">Up Down</th>
                <th class="hidden-xs" style="text-align:center;width:auto;">52 Week(Min-Max)</th>
                <th style="text-align:center;width:auto;">As On</th>

            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="CU in CustomerList">
                <td><a href="#" data-toggle="modal" data-target="#modalstock" ng-click="$parent.active =CU;" style="font-size:10px;color:#007DFF;">{{CU.Name}}</a></td>
                <td class="hidden-xs" style="text-align:right;font-size:10px;">{{CU.Index | number}}</td>
                <td style="text-align:center;width:auto;font-size:10px;" ng-style="set_color(CU.Up_Down)"><div ng-if="CU.perChange==' '">{{CU.Up_Down}}</div><div ng-if="CU.perChange!=' '">{{CU.Up_Down + ' (' + CU.perChange+ ')' }}</div></td>
                <td class="hidden-xs" style="text-align:center;font-size:10px;">{{CU.HighLow}}</td>
                <td style="text-align:center;font-size:10px;">{{CU.As_On}}</td>
            </tr>

        </tbody>

    </table>
    <div class="modal fade bs-example-modal-lg" id="modalstock" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" ng-model="name">
                            <div class="modal-dialog modal-dialog modal-lg">

                                <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" id="myModalLabel">{{active.Name}}</h4>
                                    </div>
                                    <div class="modal-body" style="height:500px !important;">
                                        <!--<canvas id="barChart" class="full-width"></canvas>-->
                                        <iframe ng-src="{{active.Name.replace('&','AND') + '.html'}}" class="frame" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" onload="" allowtransparency="false" height="500px"></iframe>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary btn-o" data-dismiss="modal">
                                            Close
                                        </button>
                                        <!-- <button type="button" class="btn btn-primary">
                                            Save changes
                                        </button>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

然后我通过以下代码在iframe中打开整个页面：{{mypage.Table_src}}等于包含html表格的stock.html页面并弹出

<div class="panel-body">
   <iframe src="{{myPage.Table_src}}" class="frame" id="Productionboxframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" onload="" allowtransparency="false" height="500px"></iframe>
</div>

请帮帮我

Answer 1

您可以使用固定位置。定位相对于屏幕视口的元素固定位置。

如何在另一整页的iframe中显示弹出窗口

1 个答案: