Question

我有一个如下所示的网页：

因此，在点击了Edit URL按钮之后，它将带我到此页面：

所以它能按预期工作，并且我是怎么做的，所以我隐藏了第一页的内容，以便显示第二页。您可以看到，在页面的左上角有一个x单击的第二页，它将关闭该窗口并再次显示第一页。我猜这是自我解释。

这是我的javascript函数：

  //function to call the edit the page
                function editURL(filename,url){

            var x=document.getElementById("table123");
                x.style.display="none";




                   $('body').pWin("open", {
                       x: 260,
                       y: 47,
                       height: 450,
                       width: 881,
                        title: "Edit:Advance Configuration",
                        skinMode:'dialog',
                        iframe:true,
                        url: "editUrl.jsp",
                        data: {


                        filename:filename,
                            link:url





                        },
                        offResize:true,
                        offMove:true,
                        onTitle:false,
                        offBottom:true
                    });




                }



            </script>

如上所示，当单击按钮时，我使用display=none隐藏了第一页，当第二个页面中的关闭按钮被单击时，我不知道如何显示该页面。如果我单击了x按钮，但显示空白内容，但在同一功能中使用display:block则无效。

我很感谢任何建议。

编辑：

这是我的jQuery pwin ：（有点长）

$.extend({
    pWin_defaults : {
        prefix: 'w',        // need to be seperate per iframe
        id : 0,
        images  : 'images/bsWin/',

        imgTopLeft : 'tl.png',
        imgTopRight: 'tr.png',
        imgTopCenter : 'centerslice.png',

        imgTopLeftDialog : 'tl_dialog.png',
        imgTopRightDialog : 'tr_dialog.png',
        imgTopCenterDialog : 'tc_dialog35.png',

        imgCloseButton : 'close.gif',
        imgCloseButtonDialog : 'dialog_close.png',

        imgBotLeft  : 'bottom_left.png',
        imgBotCenter : 'bottom_ctr.png',
        imgBotRight : 'bottom_right.png',
        imgResize : 'resize_btn.png',

        openParam : new Array(
                        'x', 'y', 'width', 'height', 'title'
                         ),
        topHeight : 35, // top bar height
        DialogTopHeight:29,
        botHeight : 19, // bottom bar height
        cornerWidth: 5, // top and bottom left right corner widths
        winZIndex : 10000,

        winMap : {},

        engageWinMove : undefined,
        engageWinResize : undefined,
        engageX : undefined,
        engageY : undefined,
        resizeProperties: {},

        isIE: navigator.userAgent.indexOf('MSIE')>=0?true:false

    },




$.fn.extend({

   pWin: function (option, settings) {
       if (option == "open") {

            for (var i=0; i<$.pWin_defaults.openParam.length; i++) {
                if (!settings[$.pWin_defaults.openParam[i]]) {
                    alert('pWin.open requires ' + $.pWin_defaults.openParam[i]);
                    return false;
                }
            }

            var skinMode = 'basic';

            if (settings.skinMode) {
                skinMode = settings.skinMode;
            }

            var id = ++$.pWin_defaults.id + $.pWin_defaults.prefix;


            var winWidth    = settings.width;
            var winHeight   = settings.height;
            var winY        = settings.y;
            var winX        = settings.x;




            var divWindow = $('<div id=\'pWin_'+id+'\' class=\'pWin\'></div>');
            divWindow.title = settings.title;
            divWindow.bind('click', function() {  $(this).pWin_activate()   });

            if (skinMode == 'dialog') {
                divWindow.addClass('pWinDialog');
            }





                if (skinMode == 'basic') {
                    topCenter.addClass('pWinTitleBasic');
                    textWidth = $.pWin_text_width(settings.title, 'pWinTitleBasic', '');
                } else if (skinMode == 'dialog') {
                    topCenter.addClass('pWinTitleDialog');
                    textWidth = $.pWin_text_width(settings.title, 'pWinTitleDialog', '');
                }



                var iePad = 0;
                if ($.pWin_defaults.isIE) {
                    iePad = 6;
                }

                //topCenter.css('width', winWidth - $.pWin_defaults.cornerWidth * 2 - iePad);
                topCenter.css('width', winWidth - iePad);
                topCenter.css('height', $.pWin_defaults.topHeight);
                if (skinMode == 'dialog') {
                    topCenter.css('height', $.pWin_defaults.DialogTopHeight);
                }
                if (skinMode == 'basic') {
                    //topCenter.css('background', 'url(' + $.pWin_defaults.images + $.pWin_defaults.imgTopCenter + ') repeat-x');
                } else if (skinMode == 'dialog') {
                    //topCenter.css('background', 'url(' + $.pWin_defaults.images + $.pWin_defaults.imgTopCenterDialog + ') repeat-x');
                }
                if (!settings.offMove) {
                    topCenter.bind('mousedown', function(e) {  $(this).pWin_move_lock(e)   });
                    topCenter.addClass('pWinMove');
                }
                    var topTitleName = $('<div class=\'pWinTitleText\' id=\'pWinTitleName_'+id+'\' >'+settings.title+'</div>');
                    var topButton = $('<div title=\'Close Window\' class=\'pWinCursor pWinTitleButton\' ></div>');
                    if (skinMode == 'basic') {
                        topButton.html('<img class=\'pWinCursor\' src=\'' + $.pWin_defaults.images + $.pWin_defaults.imgCloseButton + '\'/>');
                    } else if (skinMode == 'dialog') {
                        topButton.addClass('pWinButtonDialog');
                        topButton.html('<img class=\'pWinCursor\' src=\'' + $.pWin_defaults.images + $.pWin_defaults.imgCloseButtonDialog + '\'/>');
                    }

                    if (skinMode == 'basic') {
                        topTitleName.addClass('pWinTitleNameBasic');
                    } else if (skinMode == 'dialog') {
                        topTitleName.addClass('pWinTitleNameDialog');
                    }

                    if (settings.onClose) {
                        topButton.bind('mousedown', settings.onClose);
                    }

                    topButton.bind('mousedown', function() {
                        $(this).pWin('close', id);
                    });

                topCenter.append(topTitleName);
                topCenter.append(topButton);


            if (!settings.offTitle) {
                //divWindow.append(topLeft); 
                divWindow.append(topCenter); 
                //divWindow.append(topRight); 
                divWindow.append(clear);
            }

                var winContent = $('<div id=\'pWinContent_'+id+'\' class=\'pWinContent\'></div>');
                winContent.css('width', winWidth - 2);  // minus 2 for the borders
                winContent.css('height', winHeight);

                if (settings.corner) {
                    winContent.css('-moz-border-radius', '5px');
                }

                if (skinMode == 'basic') {
                    winContent.addClass('pWinContentBasic');
                } else {
                    winContent.css('height', winHeight + 20);
                }

                var winFrame = undefined;

编辑：

我的genurl.jsp HTML代码（第一个屏幕截图）：

<html>



<%

    String relPath = "../../../";
    NodeFacadeLocal nFacade = null;

    InitialContext ntx = new InitialContext();

    try {
        nFacade = (NodeFacadeLocal) ntx.lookup("java:comp/env/node");

    } catch (NamingException e) {
        e.printStackTrace();
    }

    //grabs the file id of each file
    //long nodeID = Long.parseLong(request.getParameter("nodeID"));
 /*String[] split1 = request.getParameter("nodeID").split(",",0);
 for(int i=0;i<split.length;i++){

     long file=Long.parseLong(split[i]);

 }*/



%>

<head>


    <title>Generate URL</title>




</head>


<body>
<div id="table123" style="overflow:scroll;height:400px;width:100%;overflow:auto">

<table class="filesTbl">
    <tr>
        <th width="1%">
            Checkbox
        </th>
        <th width="1%">
             No
        </th>
        <th width="20%">
            File Name
        </th>
        <th width="50%">
            Unique URL
        </th>
        <th width="1%">
            Edit
        </th>
        <th width="1%">
            Copy
        </th>
        <th width="1%">
            Email
        </th>

    </tr>

<%
    //need to input logic to populate data on each row

    int counter=0;
    int tally=0;

    String[] split = request.getParameter("nodeID").split(",",0);
    for(int i=0;i<split.length;i++){

        long file=Long.parseLong(split[i]);

        List files = fileFacade.list_items(file);
        for (Iterator rstltr = files.iterator(); rstltr.hasNext();) {
            Fmedia fv = (Fmedia) rstltr.next();
            Node nd = nodeFacade.get(fv.getNodeid(), false);
            // Fmedia fm = fileFacade.get_file(fv.getNodeid());



            int count = 0;
            count++;
            long fileid= nd.getNodeid();

      SettingsFacadeLocal settingFacade = (SettingsFacadeLocal)ctx.lookup("java:comp/env/settings");
        String redirectURL = settingFacade.get("SERVER_URL").getAtval();
        //declare a timestamp for unique URL
        // String timeStamp=new SimpleDateFormat("yyyy.MM.dd.HH.mm.ss").format(new java.util.Date());
        // String hash = org.apache.commons.codec.digest.DigestUtils.sha256Hex(timeStamp);

        SecureRandom secureRandom=new SecureRandom();
        byte[] token = new byte[12];
        secureRandom.nextBytes(token);
        String hash= new BigInteger(1, token).toString(12);





%>


    <tbody>
    <tr>
        <td width="5%">

            <script>


 // function to copy multiple URL links

                function copymultiplelink() {

                    var selectedFiles = $('.fileCheck:checked');
                    if(selectedFiles.length < 1 ){
                        alert("Please select at least one file.");
                        return false;
                    }
                    var filesList = [];
                    var $fileChecks = $('.fileCheck:checked');
                    $fileChecks.each(function() {
                        filesList.push($(this).val());
                    });

                    alert("You have copied " + filesList.length+ " URL");
                    copyURL(filesList.join("\n"),false);

                }

                //function to call the edit the page
                function editURL(filename,url){

            var x=document.getElementById("table123");
                x.style.display="none";




                   $('body').pWin("open", {
                       x: 260,
                       y: 47,
                       height: 450,
                       width: 881,
                        title: "Edit:Advance Configuration",
                        skinMode:'dialog',
                        iframe:true,
                        url: "editUrl.jsp",

                        data: {


                        filename:filename,
                            link:url





                        },
                        offResize:true,
                        offMove:true,
                        onTitle:false,
                        offBottom:true

                    });


                   // x.style.display="none";








                }



            </script>

            <!--Display Checkbox   -->
            <input type="checkbox" class="fileCheck" id="<%=tally=tally+1%>" value="<%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&ts="+hash%>"  />&nbsp;


        </td>

        <td>
            <!--Display No   -->
            <% counter=counter+1;
                out.print(counter);

            %>


        </td>
        <td width="28%">

            <!-- Display Filename   -->
            <%=nd.getNodedesc()%>



        </td>
        <td width="100%">
            <!-- Display Unique URL -->


            <%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&ts="+hash%>
            <%

                fileFacade.insert_url(nd.getNodeid(),"f0="+nd.getNodeid()+"&ts="+hash);

                //fileFacade.insert_url(nd.getNodeid(),"{syscont url}/repository/file/view/viewPDF.jsp?{url});

            %>


        </td>
        <td>
            <!-- Display EDIT/DEL -->
            <input type="button" value="Edit URL" onclick="editURL('<%=nd.getNodedesc()%>','<%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&ts="+hash%>')" >

        </td>
        <td> <!-- Display COPY feature -->

            <input type="button" value="Copy URL" onclick="copyURL('<%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&ts="+hash%>',true)">

        </td>


    </tr>

    </tbody>


<%}}
%>


    <script>
        function copyURL(url,showMsg) {
            var copyText = url;
            var el = document.createElement('textarea');
            el.value = copyText;
            el.setAttribute('readonly', '');
            el.style = {
                position: 'absolute',
                left: '-9999px'
            };
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
            if(showMsg==true) {
                alert("You have copied the URL");
            }
        }
    </script>





</table>






<!--Copy button to copy multiple links -->

<div class="wrapper">
    <button type="button" onclick="copymultiplelink()"> Copy Selected URL</button>
</div>
</div>
<style>


    .wrapper {
        position: absolute;
        top: 90%;
        left: 5%;
    }

</style>

</body>
</html>

它调用editURL.jsp：

</head>
<%
// get the values of filename and URL link

    String files=  request.getParameter("filename");
    String url=request.getParameter("link");



%>



<body>

<script>

</script>

File Name:<input type="text" size="30" name="Filename" value="<%=files%>" readonly><br><br>

URL Link:<input type="text" size="100" name="URL Link" value="<%=url%>" readonly><br><br>

Start Date:<input type="text" name="Start Date" value="Mickey"><br><br>


End Date:<input type="text" name="End Date" value="Mickey"><br><br>

Answer 1

这是你的元素，x

            var x=document.getElementById("table123");

现在，您只需要关闭按钮即可将x.style.display的值更改为“ block”

javascript-单击关闭按钮时如何显示div？

1 个答案: