jsp + js + 前端弹出框

末蓝、 2023-08-17 16:35 126阅读 0赞

在项目中，前端页面我们时常需要各种各样的弹出框：

1、alert对话框：显示含有给定消息的"JavaScript Alert"对话框

代码：

var a = "HelloWorld";
    alert("对话框内容：" + a);

效果：

![1405715-20190706153209654-84073261.png][]

2、confirm对话框：显示含有给定消息的"Confirm"对话框(有一个OK按钮和一个Cancel按钮).如果用户单击OK返回true,否则返回false

代码：

var a = "是否提交？";
    var result = confirm("提示：" + a);
    alert("返回结果：" + result);

效果：

![1405715-20190706153922494-724318016.png][]

3、prompt对话框：显示一个"prompt"对话框,要求用户根据显示消息给予相应输入

//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值
    var name=prompt("请输入您的名字","");    
    if(name !="" && name != null){
        alert("欢迎你，" + name);
    }

效果：

![1405715-20190706154912510-499219529.png][]

4、open：打开一个新窗口,给予一个指定的名字

代码：

//open("URL","name")
    open("promptBox.jsp","promptBox");

5、close：关闭当前窗口

代码：

close() ;

6、使用div和Jquery来展示：可以像模态框一样

注意：需要引入Jquery的相关库，本人引入的分别为：

//jsp页面：
    <div id="my_dialog" title="新建文件" style="display: none">
            <form>
                <p>
                    文件名：<input type="text" id="fileName" />
                </p>
                <p>
                    类   型：<select id="fileType">
                        <option value="txt">TXT</option>
                        <option value="doc">World</option>
                        <option value="pdf">PPT</option>
                        <option value="xls">Excel</option>
                    </select>
                </p>
                <p>
                    备   注：<input type="text" id="Remarks" />
                </p>
                <div style="float: right;">
                    <button class="my-btn-gray" OnClick="Cancel()">取消</button>
                    <button class="my-btn-blue" OnClick="confirm()">确认</button>
                </div>
            </form>
        </div>
    
        <div>
            <button οnclick="NewFile();">点击me</button>
        </div>
    
    //js中方法
    //显示新建文件提示页
        function NewFile() {
            $('#my_dialog').dialog({
                modal : true,
                width : "400",
                height : "230"
            });
            document.getElementById("my_dialog").style.display = "block";
        };
        //新建文件确认
        function confirm() {
            $('#my_dialog').dialog("close");
            var fileName = document.getElementById("fileName").value; //文件名
            var fileType = document.getElementById("fileType").value; //文件类型
            var Remarks = document.getElementById("Remarks").value; //备注
            alert("fileName:" + fileName + " fileType:" + fileType + " Remarks:" + Remarks);
        };
    
        //新建文件取消
        function Cancel() {
            $("#fileName").val("");
            $("#Remarks").val("");
            $("#fileType").empty();
            var ops = {
                "txt" : "TXT",
                "doc" : "World",
                "pdf" : "PPT",
                "xls" : "Excel"
            };
            var parent = document.getElementById("fileType");
            for ( var key in ops) {
                var o = new Option(ops[key], key);
                parent.appendChild(o);
            }
            sessionStorage.setItem("orderMergeStr", '');
            $('#my_dialog').dialog("close");
        };

效果：

![1405715-20190706170823565-1997329158.png][]

参考：[https://blog.csdn.net/diyinqian/article/details/83691464][https_blog.csdn.net_diyinqian_article_details_83691464]

注意：jquery ui dialog 右上角怎么没有显示关闭按钮

需要关闭按钮相关的图片，并且放入到对应的路径才行，具体如下：

需要在jQuery.ui.css同级目录下，建立images文件夹并且把jQuery中的图片放入进去即可。

![1405715-20190731174406834-9746858.png][]

![1405715-20190731174546197-2098675359.png][]

7、使用Jquery中的fancyBox来显示

注意：需要引入Jquery的相关库，本人引入的分别为：

//index.jsp
    <div>
        <button id="fancybox" >点击me</button>
    </div>
    //js
    $(document).ready(function() {
            $("#fancybox").fancybox({
                'href' : 'promptBox.jsp',//此处为显示页面URL
                'width' : 900,
                'height' : 600,
                'type' : 'iframe',
                'hideOnOverlayClick' : false,
                'showCloseButton' : false,
                'onClosed' : function() {
                    window.location.href = 'index.jsp';
                }
            });
        });
    //promptBox.jsp
    <p>你好,这是fancyBox显示的页面，里面可以实现很多功能哦，表单提交、信息展示、提示框等等。。。</p>
        <a href="javascript:parent.$.fancybox.close();">点击me，关闭此页面</a>

效果：

![1405715-20190706173223048-1544818170.png][]

8、dialog使用

<SCRIPT type="text/javascript" src="js/jquery-1.4.4.min.js"></SCRIPT>
    
    <SCRIPT type="text/javascript" src="js/jquery.layout.js"></SCRIPT>
    
    <link type="text/css" href="css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
        
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
    <SCRIPT type="text/javascript">
    $(document).ready(function () {
            //制定某个div的id 将其作为 Dialog            
            $('#helpdialog').dialog({
                        //是否创建就打开对话框，也就是是否页面一打开就显示对话框
                        autoOpen: false,
                        
                        /*是否需要解决无法覆盖IE6 select 元素无法被覆盖的bug
                        就是在IE6下  div无法覆盖<select></select> 是否使用那该属性解决
                        */
                        bgiframe:true,
                        
                        //设置对话框宽度
                        width: 600,
                        
                        //设置对话框高度
                        height: 260,
                        
                        /*
                            设置对话框底部的按钮
                        */
                        buttons: {
                            "确定": function() {
                                //单击按钮后的回调函数，就是按钮被单击后的响应事件 
                                $(this).dialog("close"); 
                            }
                            /*
                            "取消": function() { 
                                $(this).dialog("close"); 
                            }
                            */
                        },
                        
                        /*
                            是否为对话框添加ESC快捷键
                        */
                        //closeOnEscape: false,
                        
                        //对话框是否可以被拖动
                        draggable:false,
                        
                        //打开对话框时是否使用特效
                        show:"slide",
                        //关闭对话框时是否使用特效动画
                        hide: "slide",
                        
                        //是否可以调整对话框的大小
                        resizable:false,
                        
                        //调整对话框的高度和宽度极限值(当resizable:true时)
                        //maxHeight:520
                        //maxWidth:620
                        //minHeight:320
                        //minWidth:220
                        
                        //是否为模态窗口，设置为 true 时，页面上其它元素将被覆盖且无法响应用户操作。也就是无法再主界面上进行其他操作
                        modal:true,
                        
                        //是否可覆盖其它对话框
                        //stack:false
                        
                        //对话框标题(也可以再div的title上进行设置)
                        title:"请登陆"
                        
                        //设置对话框 CSS z-index 值
                        //zIndex:50
                    });
                    // 对话框的打开连接
                    $('#helpdialog_link').click(function(){
                        $('#helpdialog').dialog('open');
                        return false;
                    });
    });
    </SCRIPT>
    <BODY>    
    <a href="#" id="dialog_link">从此处打开对话框</a></span>
        <div id="helpdialog" title="对话框的标题">
            <p>对话框的内容</p>
        </div>
    </BODY>
    
    原文链接：https://blog.csdn.net/MOONCOM/article/details/55189616

转载于:https://www.cnblogs.com/qiantao/p/11142604.html

[1405715-20190706153209654-84073261.png]: /images/20230810/d0616d63ed3b40178a849dc130b9399a.png
[1405715-20190706153922494-724318016.png]: /images/20230810/66e92612d39a4632937690976db22788.png
[1405715-20190706154912510-499219529.png]: /images/20230810/d22221f21bfd4a1cad34d43c1fdb3c06.png
[1405715-20190706170823565-1997329158.png]: /images/20230810/63115ee2b47549179c73bb59a1f3c3f4.png
[https_blog.csdn.net_diyinqian_article_details_83691464]: https://blog.csdn.net/diyinqian/article/details/83691464
[1405715-20190731174406834-9746858.png]: /images/20230810/4a6c25ca9e414e71a27d3e931eecfee9.png
[1405715-20190731174546197-2098675359.png]: /images/20230810/fdb2e0f4d5094d90b0328f1c7f43db51.png
[1405715-20190706173223048-1544818170.png]: /images/20230810/bd4da665bf1244b1b30c28e7591b2ab0.png