工作人员

Question

我想制作餐厅订购系统，因此顾客可以在平板电脑上购买食品，工人可以在电脑上看到订单。

我已经拥有将在Android应用中使用的webView中使用的网站，但没有真正的订购。 This网站将在平板电脑上展示。 它是HTML / CSS / JS（仅适用于动画）网站，没什么特别的。如果你点击带有文字的第一张图片＆＃34; predjelo＆＃34;，你会得到一个弹出窗口，你可以选择订购的费用和费用你想要的很多。我尝试了多个预制脚本，但我无法让它们工作。 我花了大约2.5个小时试图找到解决方案，但没有很好的结果。我不想要某些东西的源代码，我希望有人告诉我该怎么做，学习我，如果我得到一些代码会很好。我喜欢学习。感谢

Answer 1

将一个函数写入click事件，该事件将使用jquery UI打开一个弹出窗口。见https://jqueryui.com/dialog/#modal-form

<script type="text/javascript">
    $(function () {
        function makeOrder(item_id) {
            dialog = $("#dialog-form").dialog({
                autoOpen: false,
                height: 400,
                width: 350,
                modal: true,
                buttons: {
                    "Make an order": makeOrder,
                    Cancel: function () {
                        dialog.dialog("close");
                    }
                }
            });
            dialog.dialog("open");

        }
    })
</script>
<ul>
    <li style="display: inline-block;" onclick="makeOrder('item_id')">
        <img src="img/predjelo.png" class="md-trigger" data-modal="modal-18" alt="Image 1">
    </li>
</ul>
<div id="order-form" title="Make order" style="display: none">
    <p class="validateTips">All form fields are required.</p>

    <form>
        <!--order form-->
        <fieldset>
            <label for="name">Name</label>

            <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
        </fieldset>
    </form>
</div>