Question

我正在尝试打开一个页面，让用户知道他们的表单是在屏幕中心的弹出窗口中提交的。我有一个弹出窗口打开的页面，但我无法弄清楚如何使用我当前的代码使窗口居中（我使用了一个不同的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编码。非常感谢!!!

Answer 1

使用您问题中的现有代码，提出以下建议。

在FF 19.0.2和IE 7中测试

将pop.htm网址更改为适合和定位，欢呼。

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

Answer 2

首先，你应该使用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;
}

Answer 3

看到这个网站会对你有所帮助 Window open() Method

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

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

到你的地方

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

3 个答案: