[英]Javascript- How to show div when close button is clicked?
我有一个如下所示的网页：
因此，在单击“ 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%>" />
</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>
这是你的元素，x
var x=document.getElementById("table123");
现在你只需要关闭按钮就可以将x.style.display的值更改为“block”
显示div onclick并在其外部单击时隐藏div并关闭按钮
[英]show a div onclick and Hide div when clicked outside of it and close button
单击按钮时如何显示 div 内容并隐藏其他内容 - JavaScript
[英]How to show div content and hide others when button is clicked - JavaScript
Javascript - 单击时显示DIV内的按钮（并隐藏所有其他按钮）
[英]Javascript - show a button inside of a DIV when clicked (and hide all others)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.