AV4 Zadaca 2 Modal Panel

Да се креира веб-страница за приказ на податоци за корисници. Страницата содржи копче „Get Data“
и поле во кое ќе се прикажуваат податоците. Со кликнување на копчето „Get Data“, корисникот
треба да има можност да ги внесе податоците без премин на нова страница. Корисникот задолжително треба да внесе име и презиме.Неговите податоци се земаат со кликнување на копчето “Proceed”, по што се прикажуваат во полето на страницата. Во меѓувреме, сите останати навигациски опции за корисникот се оневозможени.

<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sabloni vezba</title>
    <link rel="stylesheet" href="jquery_ui.css">
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <style>

    </style>

</head>


<body>
<button id="button">Get data</button>
<div id="text"></div>
<div id="modal_div">
    <p>Enter your data</p>
    <input type="text" id="input">

</div>

<script src="main.js"></script>
</body>
</html>

$(document).ready(function () {
    $("#modal_div").dialog({
        autoOpen: false,
        modal:true,
        buttons:{
            Proceed: function (){
                var data=$("#input").val();
                $("#text").html(data);
                $("#modal_div").dialog("close")
            }
        }
    })

    $("#button").click(function() {
        $("#modal_div").dialog("open")
    })

})