open a new window inside same page in a small size

问题

i have a jsp page and when clicking on submit button, a new page is opened in same page but what i want is that new page(window) should open inside same page but having less size as like you would have seen in many websites. after clicking submit button a new page will be opened in a less size, how can i do it using jquery/javascript?

index.jsp

<form action="newwindow.jsp" target="_self">
<input type="submit value="click here"/>
</form>

Any ideas please

回答1:

Below should work with your sample code, think you were looking for target="_blank", not _self as _self is the same window and has same effect of having no target value at all. Also dont think that target="_blank" is encouraged much these days, plus with tabbed browsers it will just open in a new tab and not be re-sizeable.

Hopefully the below helps

<form target="popup" action="google.com" onsubmit="window.open('', this.target,    'width=300,height=300,resizable,scrollbars=yes'); return true;">
<input type="submit" value="click here"/>
</form>

New sample code based on trying to center the pop-up.

I think the quesiton is confusing though as its not clear if the popup is accessing server side stuff or not and if it needs access to the form contents. The other answer offered for this question could also suit you based on your circumstance. Below is my revised code, hopefully it will help but not 100% sure as the context is a little confusing

<script>
function openWindow(h, w, url) {
  leftOffset = (screen.width/2) - w/2;
  topOffset = (screen.height/2) - h/2;
  window.open(url, this.target, 'left=' + leftOffset + ',top=' + topOffset + ',width=' + w + ',height=' + h + ',resizable,scrollbars=yes');

}
</script>
<form name="form2" id="form2" method="post" action="google.com" onsubmit="openWindow(300, 300, 'google.com');">
<input type="submit" value="click here"/>
</form>

回答2:

I am absolutely not sure, if I understand your question, but maybe this will help you?

<a class=".openWin" href="_#">click here</a>

$('.openWin').click(function(ev){
    window.open('/newwindow.jsp','Title','width=200,height=400');
    ev.preventDefault();
    return false;
});

if this is not what you had in mind, i suggest looking at the jquery dialog plugin.

edit after comments:

maybe you are trying to do something that doesn't need to hit the server. if all you need to do is open a "window" containing a value from a form. you can access any form field value like this...

var formFieldVal = $('input[name="myInput"]).val();

Now you can (also with jquery), create a "window" like this:

var divWindow = $('<div class="overlay"><div>' + formFieldVal + '</div></div>');

and add it to your document

$(body).append(divWindow);

now style the dynamically added divs like this (css), and you got a window look:

.overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

.overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

来源：https://stackoverflow.com/questions/9498621/open-a-new-window-inside-same-page-in-a-small-size

标签

javascript

jquery

window