Không dùng angular
Có dùng angular
* Gọi hàm JS trong angular từ của sổ popup
******************
b1. Tạo button click
<button type='button' class="btn btn-success" id="bt_popup" p_w="500px" p_h="200px" p_t="XIN CHAO" p_l="https://nhatthanh.net" data-toggle="modal" data-target="#Obj_popup" ><i class="fas fa-plus-circle"></i></button>
b2. Html chèn thêm:
<!-- Modal -->
<div class="modal fade" id="Obj_popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" style="max-width:95%;height: 90%;" >
<div class="modal-content scrollablewrapper" >
<div class="modal-header">
<strong style="text-transform:uppercase" class="text-primary title_pp">tieu de</strong>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="Obj_myModalLabel" >close</h4>
</div>
<div class="modal-body">
<iframe width="100%" id="Obj_popup_frame" frameborder="0" allowtransparency="true" name="theframe" ></iframe>
</div>
</div>
</div>
</div>
<!-- /.modal -->
b3. Javascrip chèn thêm:
b3.1 Xử lý đơn giản
<script>
function LoadData()
{
$(".bt_refesh").trigger( "click" );
}
function Close_Popup()
{
$(".close").trigger( "click" );
}
$("#bt_popup").click(function(){
var url_go=$(this).attr('p_l');
var w=$(this).attr('p_w');
var h=$(this).attr('p_h');
var t=$(this).attr('p_t');
OepenUrlPopup(url_go,w,h,t);
});
function OepenUrlPopup(url_go,width,height,title)
{
style="width:100%;height:"+height+";";
$(".title_pp").html(title);
var style_modal_dialog="max-width:"+width+";height: 90%;";
$(".modal-dialog").attr("style",style_modal_dialog);
$("#Obj_popup_frame").attr("style",style);
$("#Obj_popup_frame").attr("src",url_go);
}
</script>
* Từ cửa số cha muốn xử lý lệnh dùng như sau
<script>
window.parent.lệnh; ví dụ: window.parent.location="http://google.com"; window.parent.hàm_viết_bên_trang_con() ;
window.parent.location.reload(); //nạp lại web
</script>
Chèn đầu:
<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<script src="/vendor/jquery/jquery-1.12.4.js" type="text/javascript"></script>
<script src="/vendor/jquery/jquery-ui.js" type="text/javascript"></script>
<script src="/vendor/jquery/loader.js" type="text/javascript"></script>
Chèn cuối:
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/vendor/datatables/jquery.dataTables.js"></script>
<script src="/vendor/datatables/dataTables.bootstrap4.js"></script>
2. Có dùng Angular
Thêm thẻ a
<a href="#" class="bt_popup" ng-click="OpenPopupW('https://nhatthanh.net?config_sys=nomaster&popup=1','95%','700px','SỬA')" data-toggle="modal" data-target="#Obj_popup_pIIF">TEN</a>
chèn vào hàm : app.controller('customersCtrl', function($scope, $http) {
$scope.OpenPopupW= function(url,w,h,title) {
// alert(url);
IIF_f_OepenUrlPopup(url,w,h,title);
};
* Một số hàm đã định nghĩa sẵn ở masterpage
IIF_f_Close_Popup() - đóng cửa sổ
IIF_f_Close_Popup_R - đóng cửa sổ có nạp lại web
Click Xem thêm
* Từ của sổ POPUP muốn gọi 1 hàm nằm trong Angular
Nếu gọi hàm nào đó mà nằm trong app của Angular thì sẽ không gọi được (lỗi) vì hàm đó của Angular
Cách 1: gọi bằng trigger
<input id="btXuLy" type="button" value="OK" />
B1:
<script>
$("#btXuLy").click(function(){
window.parent.alert_pIIF('thông báo','Lưu thành công !'); // hàm thông báo bên dưới
window.parent.$('#btNapDonHang').trigger("click"); // với btObj là tên Id của HTML, có thể dùng class
window.parent.IIF_f_Close_Popup() ; // hàm đóng popup, xóa nếu không cần dùng
});
</script>
B2: Từ trang cha
Thêm một nút lệnh:
<a id="btNapDonHang" href="#" ng-click="loadDonHang()"><i class="fas fa-sync-alt"></i></a>
* HTML phải nằm trong <div ng-app="myApp" ng-controller="myCtrl"> ...
Cách 2: gọi bằng hàm ở trang cha bằng nút lệnh ở trang popup
B1: Từ của sổ Popup
<input id="btXuLy" type="button" value="OK" />
<script>
$("#btXuLy").click(function(){
window.parent.alert_pIIF('thông báo','Lưu thành công !'); // hàm thông báo bên dưới
window.parent.HamXuLy() ;
window.parent.IIF_f_Close_Popup();
});
</script>
B2: Từ trang cha
Thêm một nút lệnh:
<a id="btNapDonHang" href="#" ng-click="loadDonHang()"><i class="fas fa-sync-alt"></i></a>
* Nằm trong <div ng-app="myApp" ng-controller="myCtrl">
Thêm hàm HamXuLy trong Script phía ngoài var app = angular.module("myApp", []);
<script type="text/javascript">
function HamXuLy()
{
$('#btNapDonHang').trigger("click");
}
//Phía trên var app
var app = angular.module("myApp", []);
// .....
</script>
Hiển thị hộp thoại