HTML 弹出窗口，其中包含表单提交的链接

Html Popup With Links On Form Submit

本文关键字：包含 表单提交 链接 窗口 HTML      更新时间：2023-09-26

我正在尝试在提交特定表单时向客户显示一个花哨的html弹出窗口/框架（不是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>

请帮忙:)

非常感谢！

尝试使用 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');
                }
            }
        });

更多信息请见本网站。

我建议你需要在正文底部的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。 这不是一个好方法。

也不要使用任何其他插件，因为使用第三方插件来处理这样简单的东西是不好的。它使您的项目更加复杂和缓慢。因为他们为具有多个选项的多种情况进行设计，如果您不需要这意味着值得使用该插件。

相关文章：