Html Popup With Links On Form Submit

Question

I am trying to display a fancy html popup/frame (not windows style) to the customer when a particular form is submitted. Not sure what would be the best way of doing that!

I tried something with the code below but there are 2 issues with this. Firstly the box that comes as a popup looks like a windows popup box (browser type) which I don't want. I just want a simple square box where I can add colors, image etc. Another problem is that my links within this code are not working. For eg. I want one of the links to take me to another page on the site after closing the message box, and the other link could simple be used to close the box... or may be just 2 links that could take me to 2 different pages!

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

Please help :)

Many thanks!

Answer 1

try using jquery modal dialog:

 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>";

and call the modal dialog

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

more info on this site .

Answer 2

I suggest you need to create popup div in HTML at bottom of body. Hide popup by default By CSS and when you want to open it, then make it visible by javascript and pass content you do want to display if you have dynamic content.

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

Because in your case you are creating poup every time you click on button. which is not good way to do it.

Also don't use any other plugin because it's not good to use third party plugin for simple stuffs like that. It's make your project more complicated and slow. Because they design for multiple situations with multiple options, and if you not need that mean it's worth to use that plugin.

Html Popup With Links On Form Submit

Question

2 answers

solution1
1 2012-04-19 06:42:28

solution2
0 2012-04-19 07:36:05

Html Popup With Links On Form Submit

Question

2 answers

solution1 1 2012-04-19 06:42:28

solution2 0 2012-04-19 07:36:05

solution1
1 2012-04-19 06:42:28

solution2
0 2012-04-19 07:36:05