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

Question

我想通过单击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>

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

Answer 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>

Answer 2

您可以使用Bootstrap Popover 。 Bootstrap为您准备了许多东西，因为如果您自己编写东西，可能会遇到流行的库/框架中已经解决的问题。 如果您不想加载整个框架，可以使用引导程序仅加载所需的模块。 https://getbootstrap.com/docs/4.0/components/popovers/

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

问题描述

2 个解决方案

解决方案1
1 2018-01-09 16:04:42

解决方案2
0 2018-01-09 15:28:21

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

问题描述

2 个解决方案

解决方案1 1 2018-01-09 16:04:42

解决方案2 0 2018-01-09 15:28:21

解决方案1
1 2018-01-09 16:04:42

解决方案2
0 2018-01-09 15:28:21