jsp + js + 前端彈出框

時間 2019-12-11

標籤 jsp 前端彈出欄目 JSP 简体版

原文原文鏈接

在項目中，前端頁面咱們時常須要各類各樣的彈出框：javascript

一、alert對話框：顯示含有給定消息的"JavaScript Alert"對話框css

代碼：前端

var a = "HelloWorld";
alert("對話框內容：" + a);

效果：java

二、confirm對話框：顯示含有給定消息的"Confirm"對話框(有一個OK按鈕和一個Cancel按鈕).若是用戶單擊OK返回true,不然返回falsejquery

代碼：session

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

效果：app

三、prompt對話框：顯示一個"prompt"對話框,要求用戶根據顯示消息給予相應輸入jsp

//這裏須要注意的是，prompt有兩個參數，前面是提示的話，後面是當對話框出來後，在對話框裏的默認值
var name=prompt("請輸入您的名字","");    
if(name !="" && name != null){
    alert("歡迎你，" + name);
}

效果：ide

四、open：打開一個新窗口,給予一個指定的名字ui

代碼：

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

五、close：關閉當前窗口

代碼：

close() ;

六、使用div和Jquery來展現：能夠像模態框同樣

注意：須要引入Jquery的相關庫，本人引入的分別爲：

//jsp頁面：
<div id="my_dialog" title="新建文件" style="display: none">
        <form>
            <p>
                文件名：<input type="text" id="fileName" />
            </p>
            <p>
                類&nbsp;&nbsp;&nbsp;型：<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>
                備&nbsp;&nbsp;&nbsp;注：<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 onclick="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");
    };

效果：

七、使用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>