1

当提交特定表单时，我试图向客户显示一个精美的 html 弹出窗口/框架（不是 windows 样式）。不知道这样做的最佳方法是什么！

我用下面的代码尝试了一些东西，但这有两个问题。首先，作为弹出窗口出现的框看起来像我不想要的 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>

请帮忙 ：）

非常感谢！

4

2 回答 2

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

本网站上的更多信息。

于 2012-04-19T06:42:28.370 回答
0

我建议您需要在正文底部的 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();
});

因为在您的情况下，每次单击按钮时都会创建弹出窗口。这不是一个好方法。

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

于 2012-04-19T07:36:05.167 回答