Question

我在jsp中的确认框中需要很少的自定义，这是使用javascript无法实现的，但经过一些研究发现Jquery对完成此要求很有用。

尝试下面的代码，但是当执行按钮点击操作时，确认框没有显示，困惑且无法理解问题。

以下是我的代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>

 <script type="text/javascript" >

 $(document).ready(function(){
     $("#docs").click(function(){
         ConfirmDialog();
     });

     });

    function ConfirmDialog(){
         $('<div></div>').appendTo('body')
                      .html('<div><h6>'+"Do you want to export or open the document"+'?</h6></div>')
                     .dialog({
                            modal: true, title: '', zIndex: 10000, autoOpen: true,
                            width: 'auto', resizable: false,
                            buttons: {
                                Export: function () {
                                                                   $(this).dialog("close");
                                    alert("your document is being saved");
                                },
                                Open: function () {
//                                  
                                    $(this).dialog("close");
                                    alert("your document will open in another window");
                                }
                            },
                            close: function (event, ui) {
                                $(this).remove();
                            }
                        });
        };




</script>

<button id="docs">xxx docs</button>


</body>
</html>

Answer 1

取决于评论。确保您要导入以下脚本

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

并且在调用ConfirmDialog

之前应该调用它们

Answer 2

您需要包含jQuery UI库。

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

使用Jquery不调用确认对话框

2 个答案: