单击按钮时如何显示对话框

时间:2018-01-09 15:24:27

标签: javascript jsp

我想通过单击JSP页面中的按钮来显示一个对话框。 这是我的代码:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <meta charset="utf-8">
</head>
<body>
            <form action="/HabilitationFaite" method="POST">
                ...
                ...
                <div class="text-center">
                    <button type="submit" class="btn btn-default btn-lg" onclick="alerte_habilitation('Test!')">Envoyer</button>
                </div>
            </form>
        </div>
        <script type="text/javascript">
            function alerte_habilitation( msg ){
                var popup = $("<div></div>");
                $(popup).append('<img src="img/bigWarning.png" 
                class="dialog-image">');
                $(popup).append('<span class="dialog-msg">'+msg+'</span>');

                var popupConf = { 
                        autoOpen  : true,
                        resizable : false,
                        draggable : false,
                        width     : 500,
                        title     : "Attention",
                        modal     : true,
                        buttons   : {
                            "OK": function () {
                                $(this).dialog("close");
                            }
                        }
                    };

                $(popup).dialog( popupConf );
            }
        </script>
</body>
</html>

此代码不显示对话框,我找不到解决方案。 谢谢你的回答。

2 个答案:

答案 0 :(得分:1)

最后,就像他说的EduardVoid一样,我忘了包含一些jquery / bootstrap:

        <script src="/js/lib/jquery-1.11.3.min.js"></script>
        <script src="/js/lib/bootstrap.min.js"></script>
        <script src="/js/lib/jquery-ui.js"></script>

答案 1 :(得分:0)

您可以使用 Bootstrap Popover 。 Bootstrap有很多东西可供你使用,因为如果你自己编写东西,你可能会遇到已经在流行的库/框架中解决的问题。如果您不想加载整个框架,则bootstrap允许您仅加载所需的模块。 https://getbootstrap.com/docs/4.0/components/popovers/