2

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

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

 <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>

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

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

4

3 回答 3

1

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

在 FF 19.0.2 和 IE 7 中测试

更改了 pop.htm URL 以适应和定位，干杯。

变量 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>
于 2013-03-22T15:25:06.157 回答
1

首先，如果这是您选择的路线，您应该使用 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>

您的 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);
            };
        });
    });

});

在 CSS 中设置 div 居中的样式，你只需要做这样的事情。

.divToBeCentered{
    height: 100px;
    width:40%;
    margin:auto;
}
于 2013-03-22T15:31:33.483 回答
-1

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

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

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

到你的地方

于 2013-03-22T14:51:41.097 回答