0
我在我的新的web應用程序中有一個模式,我想打印模式內容,模式是可滾動的。現在,我只能打印可查看的內容。什麼是我應該做的更正我的style.css。打印可滾動boootstrap模式
的index.html
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 ALIGN="center" class="modal-title">MR FINANCE</h4>
</div>
<div class="modal-body" >
<div class="row">
<div class="col-xs-6">
<div class="form-group">
Name:<input type="text" ng-model="cstmrname" class="form-control" placeholder="Jane Doe" >
</div>
<div class="form-group">
Phone:<input type="number"ng-model="cstmrphone" class="form-control" placeholder="8086502009">
</div>
</div>
<div class="col-xs-6 ">
<div class="text-right">
<p ><STRONG >GLID:{{(GLID.GLID-0)+1}}</STRONG></p>
{{date | date:'MM-dd-yyyy'}}<br/>
{{place}}
</div>
<div class="form-group">
Address: <textarea type="text" class="form-control" ng-model="cstmradress" rows="2"></textarea>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<h4 align="center">
Ornaments
</h4>
<form class="form-inline form-group">
<fieldset data-ng-repeat="choice in choices">
<div class="col-xs-3">
<div class="form-group">
<select class="form-control" id="optioin1" ng-model="choice.option1" >
<option value="Ring" >Ring</option>
<option value="Earings" >Earings</option>
<option value="Chains">Chains</option>
<option value="Necklaces">Necklaces</option>
<option value="Bangles">Bangles</option>
</select>
</div>{{choice.option1}}
</div>
<div class="col-xs-4">
<div class="input-group">
<input type="number" step="0.01" ng-model="choice.weight" class="form-control" placeholder="Weight" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">gm</span>
</div>
</div>
<div class="col-xs-4 pull-right">
<button class="btn btn-default" ng-show="$last" ng-click="removeChoice() "><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
<button class="btn btn-default" ng-show="$last" ng-click="addNewChoice()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="text-left"> Total Numbers:{{ choices.length}}</p>
</div>
<div class="col-xs-6"><p>Total Weight: {{total(number)}}gm</p>
</div>
</div>
<hr>
<form align="center" class="form-inline">
PledgeAmt:
<div class="input-group">
<input type="number" ng-model="pledgeamt" class="form-control" placeholder="{{(total()*2050)-3000}}-{{total()*2050}}" >
<span class="input-group-addon" id="basic-addon2">RS</span>
</div>
</form>
<hr>
<div class="row">
<h5 align="center"> Interest</h5>
<div class="col-xs-6">
<p> 1-3Month:{{ intrst[0].INTR1}}%({{(pledgeamt/100)*1}}RS/day)</p>
</div>
<div class="col-xs-6">
<p > 3-12Month:{{ intrst[0].INTR2}}%({{(pledgeamt/100)*2}}RS/day)</p>
</div>
</div>
<tr ng-repeat="ornament in data">
<td>{{ornament.GLID}}</td>
<td>{{ornament.WEIGHT}}</td>
<td>{{ornament.TOTGRAM}}</td>
</tr>
<div class="modal-footer">
<button type="button" ng-click="insertvalue()" class="btn btn-default" >Submit</button>
<button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
的style.css
.printable { display: none; }
@media print
{ .modal-footer,
.non-printable { display: none; }
.printable1 {
width: auto;
height: auto;
overflow: visible !important; }
}
當我用下面的風格,同時打印的背景內容,如果我做它的知名度沒有,生成額外5頁。 – Ajith