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');
                }
            }
        });

有关此site的更多信息。

Answer 2

我建议你需要在body的底部用HTML创建popup 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 个答案: