Implement qml dialog

qml dialog

import QtQuick 2.0

Rectangle {
    id: root
    width: 360
    height: 360

    Rectangle {
        id: myButton

        width: 200
        height: 120
        radius: 25
        anchors.centerIn: parent

        property color buttonColor: "white"
        property color buttonColorPressed: "gray"
        property color buttonBorderColor: "gray"
        property color buttonBorderColorPressed: "black"

        MouseArea{
            id: myButtonMouseArea
            anchors.fill: parent

            onClicked: myDialog.show();
        }

        //gradient color, changed with mouse pressed
        gradient: Gradient {
            GradientStop {
                position: 0.0;
                color: myButtonMouseArea.pressed ? "black" : "gray" }
            GradientStop {
                position: 1.0;
                color: myButtonMouseArea.pressed ? "gray" : "white" }
        }

        border.width: 2
        border.color: myButtonMouseArea.pressed
                      ? buttonBorderColorPressed : buttonBorderColor

        Text{
            id: buttonLabel
            anchors {
                centerIn: parent
                top: parent.top
            }
            color: "black"
            text: "Open Dialog"
        }

    }

    //Dialog
    Rectangle {
         id: myDialog

         property Item text: dialogText

         width: 300
         height: 200
         anchors {
             centerIn: parent
         }
         color: "lightgray"
         border.width: 3

         signal closed
         signal opened
         function forceClose() {
             if(myDialog.opacity != 0){
                 myDialog.closed();
                 myDialog.opacity = 0;
             }
         }

         function show() {
             myDialog.opened();
             myDialog.opacity = 1;
         }

         opacity: 0 //default hide
         visible: opacity > 0
         Behavior on opacity {
             NumberAnimation { duration: 1000 }
         }

         Text {
             anchors.centerIn: parent;
             text: "I'm a Dialog"
         }

         MouseArea {
             anchors.fill: parent;
             onClicked: parent.forceClose();
         }
     }

}