javascript 在居中的弹出窗口中打开表单提交的消息

Opening a form submitted message in a centered popup window

提问by Kristin Shoffner Tanner

I'm trying to open a page that let's the user know their form as been submitted in a pop up window that is centered on the screen. I have got the page to open in a pop up window but I can't figure out how to center the window with my current code (I was using a different js code that opened/centered the pop up but it also continued to open a new page with the same info).

我正在尝试打开一个页面，让用户知道他们的表单已在以屏幕为中心的弹出窗口中提交。我已经让页面在弹出窗口中打开，但我无法弄清楚如何用我当前的代码将窗口居中（我使用了不同的 js 代码来打开/居中弹出窗口，但它也继续打开一个具有相同信息的新页面）。

Here is the code for the form currently...

这是当前表单的代码...

 <form method="post" action="php/sendmail.php" target="POPUPW" onsubmit="POPUPW = window.open('about:blank','POPUPW','width=600,height=175');" id="contact">
    <h2>Name: (required)</h2><br />
            <input name="name" type="text" size="55" class="required error"><br />
            <h2>Email: (required)</h2><br  />
            </span><input name="email" type="text" size="55" class="required email"/><br />
            <h2>Phone:</h2><br />
            <input name="phone" type="text" size="55" /> <br />
            <h2>Comments:</h2><br />
            <textarea name="comments" rows="15" cols="47"></textarea><br />
            <br />
    <input type="submit" value="Submit" />
     </form>

The page is currently up at http://www.concept82.com/DIS/contact.html

该页面目前位于http://www.concept82.com/DIS/contact.html

I know this is probably really simple but I'm new javascript and php coding. Thanks so much!!!

我知道这可能真的很简单，但我是新的 javascript 和 php 编码。非常感谢！！！

回答by Funk Forty Niner

Using your existing code in your question, have come up with the following.

在您的问题中使用您现有的代码，提出以下内容。

Tested in FF 19.0.2 and IE 7

在 FF 19.0.2 和 IE 7 中测试

Changed pop.htm URL to suit and position, cheers.

更改 pop.htm URL 以适应和定位，欢呼。

var w = 200; // width in pixels
var h = 200; // height in pixels

无功 w = 200; // 以像素为单位的宽度
var h = 200; // 像素高度

<script>
function popupwindow(url, title, w, h) {
    var w = 200;
    var h = 200;
    var left = Number((screen.width/2)-(w/2));
    var tops = Number((screen.height/2)-(h/2));

window.open("pop.htm", '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+tops+', left='+left);
}

</script>

<form method="post" action="php/sendmail.php" onsubmit="popupwindow()"; id="contact">
<h2>Name: (required)</h2><br />
        <input name="name" type="text" size="55" class="required error"><br />
        <h2>Email: (required)</h2><br  />
        </span><input name="email" type="text" size="55" class="required email"/><br />
        <h2>Phone:</h2><br />
        <input name="phone" type="text" size="55" /> <br />
        <h2>Comments:</h2><br />
        <textarea name="comments" rows="15" cols="47"></textarea><br />
        <br />
<input type="submit" value="Submit" />
</form>

回答by iAmClownShoe

first of all, you should be using jquery to make an ajax call if that's the route you choose. The only way that you can post to your server side php script without a redirect is to do it asynchronously using Ajax. I HIGHLY recommend using jquery's ajax method for this as they have made it absurdly simple. To accomplish this you must save all your form input values to variables and then create a data object with them. That data object is then sent via the ajax call to the server.

首先，如果这是您选择的路线，您应该使用 jquery 进行 ajax 调用。无需重定向即可发布到服务器端 php 脚本的唯一方法是使用 Ajax 异步执行此操作。我强烈建议为此使用 jquery 的 ajax 方法，因为它们使它变得非常简单。为此，您必须将所有表单输入值保存到变量中，然后使用它们创建数据对象。然后该数据对象通过 ajax 调用发送到服务器。

<form method="" action="">
<h2>Name: (required)</h2><br />
        <input name="name" type="text" size="55" class="required error name"><br />
        <h2>Email: (required)</h2><br  />
        </span><input name="email" type="text" size="55" class="required email"/><br />
        <h2>Phone:</h2><br />
        <input name="phone" type="text" size="55" class="phone" /> <br />
        <h2>Comments:</h2><br />
        <textarea name="comments" rows="15" cols="47" class="comments"></textarea><br />
        <br />
<input type="submit" value="Submit" class="submitBtn" />
 </form>

Your html is slightly different in that i have changed the form by taking out the action and method as well i have added classes that i can use as selectors with jquery to your input elements.

您的 html 略有不同，因为我通过删除操作和方法来更改表单，并且我添加了类，我可以将这些类用作带有 jquery 的选择器到您的输入元素。

$(document).ready(function(){
    $('.submitBtn').click(function(e){
        e.preventDefault();
        var name = $('.name').val();
        var email = $('.email').val();
        var phone = $('.phone').val();
        var comments = $('.comments').val();

        var dataObject = {
            name: name,
            email: email,
            phone: phone,
            comments: comments
        }

        $.Ajax({
        url: php/sendmail.php,
        type: 'post',
        dataType: "json",
        contentType: "application/json",
        data: dataObject,
        success: function(data){
                 var createdDiv = '<div class="divToBeCentered"><p class="dataText">' + data + '</p></div>';
                 $('body').append(createdDiv);
            };
        });
    });

});

in css to style the div to be centered you just need to do something like this.

在 css 中设置 div 的样式以使其居中，你只需要做这样的事情。

.divToBeCentered{
    height: 100px;
    width:40%;
    margin:auto;
}

回答by Kaiser Helawe

See this site will be help you Window open() Method

看到这个站点会帮助你 Window open() 方法

when you want to open the page in javascript change the

当你想在 javascript 中打开页面时，更改

left=pixels
height=pixels
top=pixels
width=pixels

to your place

到你的地方