POPUP NATIVESCRIPT 6.3.1

popup-model.js

const ObservableArray = require("data/observable-array").ObservableArray;

function xViewModel(items) {
    var viewModel = new ObservableArray(items);

    return viewModel;
}

module.exports = xViewModel;

popup-page.css

.popup-container{
    position: fixed;
	z-index:99999;
	background-color:#bb000000;
	min-height:100;
	width:100%;
    height:100%;
    padding: 30px;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.popup-box{
    padding: 55px;
    background-color: #ffffff;
    color: #199AAE;
}

popup-page.js

const xViewModel = require("./popup-model");
var GetModel = new xViewModel([]);

var context;


exports.onLoaded = function(args) {
    const page = args.object;
    context = GetModel;
    
    context.set("popup", false);

    page.bindingContext = context;
}

exports.OpenPopup = function(){
    context.set("popup", true);
    context.set("items", [
        {
            name: "Item 1",
            description: "Description for Item 1"
        },
        {
            name: "Item 2",
            description: "Description for Item 2"
        },
        {
            name: "Item 3",
            description: "Description for Item 3"
        },
        {
            name: "Item 4",
            description: "Description for Item 4"
        },
        {
            name: "Item 5",
            description: "Description for Item 5"
        },
        {
            name: "Item 6",
            description: "Description for Item 6"
        },
        {
            name: "Item 7",
            description: "Description for Item 7"
        },
        {
            name: "Item 8",
            description: "Description for Item 8"
        },
        {
            name: "Item 9",
            description: "Description for Item 9"
        },
        {
            name: "Item 10",
            description: "Description for Item 10"
        },
        {
            name: "Item 11",
            description: "Description for Item 11"
        },
        {
            name: "Item 12",
            description: "Description for Item 12"
        },
        {
            name: "Item 13",
            description: "Description for Item 13"
        },
        {
            name: "Item 14",
            description: "Description for Item 14"
        },
        {
            name: "Item 15",
            description: "Description for Item 15"
        },
        {
            name: "Item 16",
            description: "Description for Item 16"
        }
    ]);
};

exports.ClosePopup = function(){
    context.set("popup", false);
};

exports.onItemTapFromPopup=function(args){
    let itemTap = args.view;
    let itemTapData = itemTap.bindingContext;

    context.set("popupname", itemTapData.name);
    context.set("popupdescription", itemTapData.description);

    context.set("popup", false);
    alert("Data berhasil di binding");
};

popup-page.xml

<Page
    class="page"
    loaded="onLoaded"
    xmlns="http://schemas.nativescript.org/tns.xsd">

    <GridLayout class="page-content">
        <AbsoluteLayout width="100%" height="100%">
            <StackLayout orientation="vertical">
                <Button text="Buka Popup" tap="OpenPopup" />
                <TextView hint="Input name" text="{{ popupname }}" />
                <TextField hint="Input description" text="{{ popupdescription }}" />
            </StackLayout>

            <StackLayout class="popup-container" horizontalAlignment="center" verticalAlignment="center" visibility="{{ popup ? 'visible' : 'collapsed' }}">
                <ScrollView orientation="vertical" height="70%">
                    <GridLayout class="popup-box" rows="*, auto" height="100%">
                        <StackLayout orientation="vertical" row="0">
                            <ListView items="{{ items }}" itemTap="onItemTapFromPopup" class="list-group">
                                <ListView.itemTemplate>
                                    <StackLayout orientation="horizontal" class="list-group-item">
                                        <Label text="{{ name }}" textWrap="true"></Label>
                                    </StackLayout>
                                </ListView.itemTemplate>
                            </ListView>
                        </StackLayout>
                        <StackLayout orientation="vertical" row="1">
                            <Button text="Close" tap="ClosePopup" />
                        </StackLayout>
                    </GridLayout>
                </ScrollView>
            </StackLayout>

        </AbsoluteLayout>
    </GridLayout>
</Page>