带表单链接的HTML弹出窗口提交

Question

我正在尝试在提交特定表单时向客户显示精美的html弹出窗口/框架（不是Windows样式）。 不确定这样做的最好方法是什么！

我尝试了下面的代码，但是有2个问题。 首先，作为弹出窗口出现的框看起来像我不想要的Windows弹出框（浏览器类型）。 我只想要一个简单的正方形框，可以在其中添加颜色，图像等。另一个问题是此代码中的链接无法正常工作。 例如。 我希望其中一个链接在关闭消息框后将我带到网站的另一页，而另一个链接可以简单地用于关闭该框...或者可能只是2个链接可以将我带到2个不同的页面！

<form action="do.something" method="post" onsubmit="return action_submitted();">

<script type="text/javascript">

    function action_submitted() {
        HTML = '';
        HTML += '<html><head><title>New Action</title></head>';
        HTML += '<body bgcolor="#f5f5f5" style="margin:0px;">';
        HTML += 'Congrats, your action was successful! <br/>';
        HTML += '<a href="close">Close Message</a><br/>';
        HTML += '<a href="/gothere.do">There</a><br/>';
        HTML += '<script>onload=function(){setTimeout("self.close()",5000);}<'+'/script>';
        HTML += '</body></html>';
        var w = 500;
        var h = 200;
        var l = (screen.availWidth - w) / 2;
        var t = (screen.availHeight - h) / 2;
        actionwin = open('javascript:opener.HTML','actionwin','left='+l+',top='+t+',width='+w+',height='+h+',status=0');

        if (actionwin && !actionwin.closed) actionwin.focus();
                    return true;
                }

</script>

请帮忙：）

非常感谢！

Answer 1

尝试使用jQuery模式对话框：

 var modal = "<div id='modal_pop'>" +
            "<div><center ><img id='imgLogo' src='../../Images/abc.PNG' alt='Value Interface'/></center></div>" +
            "<p>This is a fancy modal pop up.</p>" +
            "</div>";

并调用模式对话框

$(modal).dialog({
            modal: true,
            width: 400,
            height: opts.windowHeight,
            closeOnEscape: false,
            draggable: false,
            resizable: false,
            zIndex: 99999,
            bgiframe: true,
            title: Sample!',
            buttons: {
                "OK": function () {
                // your action on OK clikc  
                $(this).dialog('close');
                                      },
                "Cancel": function () {
                    $(this).dialog('close');
                }
            }
        });

有关此网站的更多信息。

Answer 2

我建议您需要在主体底部以HTML创建弹出div。 默认情况下，隐藏CSS弹出窗口，当您要打开它时，然后使其在javascript中可见，并传递您要显示的内容（如果您具有动态内容）。

HTML

<div id="popupWrapper">
    <div id="popup">
        content goes here
    </div>
</div>

CSS

#popupWrapper { display: none;}

jQuery的

$('#button').live('click', function() {
    $('#popup').text('content goes here');
    $('#popupWrapper').fadeIn();
});

因为您的情况是每次单击按钮都会创建Poup。 这不是一个好方法。

也不要使用任何其他插件，因为将第三方插件用于诸如此类的简单操作是不好的。 这会使您的项目更加复杂和缓慢。 因为它们针对多种情况设计了多个选项，所以如果您不需要它，那么值得使用该插件。

带表单链接的HTML弹出窗口提交

问题描述

2 个解决方案

解决方案1
1 2012-04-19 06:42:28

解决方案2
0 2012-04-19 07:36:05

带表单链接的HTML弹出窗口提交

问题描述

2 个解决方案

解决方案1 1 2012-04-19 06:42:28

解决方案2 0 2012-04-19 07:36:05

解决方案1
1 2012-04-19 06:42:28

解决方案2
0 2012-04-19 07:36:05