Displaying a pop-up modal dialog from fancybox's afterClose Function

I need to display a pop-up dialog with one or two buttons to let users either go elsewhere or just cancel, in existing code. In fact, it took ages to find out where to do that, from php to javascript, as can be seen in another question I placed here some days ago.

While I was looking into using another plugin to make things simpler, it would be better to use the same fancybox, make things slower to load. If you can have suggestions with examples of code, please include that as it makes it faster to solve the issue at hand.
RJVAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

InsoftserviceCommented:
http://buckwilson.me/lightboxme/

Try out this one.

If you have used any please do let me know so that i can edit if there is any js issue

Please note: have not considered to work more on design, its basic code to get to know how flow work .
You can even try the link provided


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>Love to marry an free matrimonial website</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
	function test()
	{

	   $("#loading_message").show().animate(
			{"duration": 500},
			"slow");
$("#login").show();
	}

	function cancel()
	{
	   $("#loading_message").animate(
	   {"duration": 500},
	   "slow");
$("#login").hide();
$("#loading_message").hide();
	}



  </script>
 </head>

 <body>
      <div id="loading_message" style="display:none;position:absolute;top:0%;left:0%;width:100%;height:2500px;background-color:#EFEAEA;z-index:1;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);">
	  <span id="login" style="z-index:111">
<br><br>login form
<br><br>name <input type='text'>
<br><br>password <input type='text'>
<a href="javascript:cancel();">cancel</a>
</span>
</div>
here is the link tp het pop up
<a href="javascript:test()">click here</a>




 </body>
</html>

Open in new window

0
RJVAuthor Commented:
Great, Buck. I copy/pasted what you included into an index.html but didn't get a pop-up. BTW, how small is it? You mention a small size but compressed. Text when compressed has a very high compression ratio, but the html used won't be compressed.

When you think about it, it sounds odd that there isn't much out there to do something quick and easy: display a message or warning, such as you have with any programming environment. Like warning: don't do that (or similar).

My current issue is to get the existing Fancybox to close and be replaced by either another Fancybox or something else.
0
InsoftserviceCommented:
DId you tried the link provided as i told you that i have not added much more efforts on css.
Good example can be viewed from that link
If you require that i can integrate and provide the same
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

RJVAuthor Commented:
Yes, I did. How flexible is it (changing background, buttons, etc)? How light is it, not compressed? I'll have to see how it does when the Fancybox closes as that has been part of the issue.
0
InsoftserviceCommented:
Its light you can simply compress it with any online tool.
Even minify version is available.
If you want some more animation while closing even it can be done.
It has many features within it.
0
GaryCommented:
What is wrong with just a plain js alert box - OK/Cancel?
0
InsoftserviceCommented:
I normally take a sample copy of my projects modify some text and upload it,
i might have missed to remove the text from it i hope there is nothing now. @gary

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>login popup</title>
	  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <style type="text/css">
    
        .label
        {
            font-family: Verdana;
            font-size: medium;
            font-weight: bold;
            color: #000000;
        }
        .click
        {
            font-family: Verdana;
            font-size: medium;
            font-weight: bold;
            color: #000000;
            padding:300px;
        }
    
        .Title
        {
            font-family: Verdana;
            font-size: large;
            font-weight: bold;
            color: #FF9900;
        }
    
        #Button1
        {
            width: 64px;
             font-family: Verdana;
            font-size: medium;
            font-weight: bold;
            background-color:Teal;
            color:#FFF;
        }
      .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 360px;
            height: 196px;
            padding: 16px;
            box-shadow:inset 0 0 4px 4px #999;
            background-color: white;
            z-index:1002;
            overflow: auto;
            border-radius:10px;
            margin-left:8%;
        }
        
    </style>
    <script type="text/javascript" language="javascript">
    function createlightbox()
    {
        $('#light').show().animate(
			{"opacity": "1"},
			"slow");
        $('#fade').show().animate(
			{"opacity": "1"},
			"slow");
		$('#light').css('z-index', 1006);
    }
    function closelightbox()
    {
        $('#light').animate(
			{"opacity": "0.01"},
			"slow");
        $('#fade').hide().animate(
			{"opacity": "0.01"},
			"slow");
			$('#light').css('z-index', -1);
    }
    </script>
</head>
<body>

<table width="100%" align="left">

<tr><td>

<p class="click"><a href = "javascript:void(0)" onclick = "createlightbox()">click here  Login Form </a></p>

<div id="light" class="white_content" > 
<a href = "javascript:void(0)" onclick = "closelightbox()" style="float:right">
<img src="http://2.bp.blogspot.com/-aXHXnOQPBJM/Tx_p1qqNI4I/AAAAAAAAAeU/bH0tlsikADQ/s1600/icon_cancel.gif" alt="" /></a>      
    <table align="center" cellpadding="5" cellspacing="5" >
    <tr>
    <td colspan="2" class="Title" align="center">Login Form</td>
    </tr>
        <tr>
            <td class="label">              
                UserName:</td>
            <td align="center">
                
                <input id="Text1" type="text" /></td>
        </tr>
       <tr>
            <td class="label">              
                Password:</td>
            <td align="center">
                
                <input id="Text2" type="password" /></td>
        </tr>
        <tr>
            <td>              
               
            
              <input id="Button1" type="button" value="Login" /></td></tr>
			  <tr>
			  </tr>
			  </table>
           </div></td></tr>
     
    </table>   

 <div id="fade" class="black_overlay"></div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RJVAuthor Commented:
Gary, who or what was wrong? I ask as my last answer is not here.
0
InsoftserviceCommented:
@RJV did u checked the code ?
0
RJVAuthor Commented:
@insoftservice, I just have. I put it in an index.html. I'll check it out with the current code to see how it does.

@GaryC, did you get to see my reply to you?
0
GaryCommented:
What reply?
0
RJVAuthor Commented:
Hummm... that reply really did go up in smoke! I though you had removed it.

To answer it your question again, alerts are generally very cryptic. On top of that, there is no relationship to the GUI, which we put a lot of effort into. Alerts change quite a lot depending on the browser and OS, particularly in the mobile world. Finally, in at least one instance we need to let the user have the option of going to another page, which is not part of the alert world (at least to my knowledge).
0
GaryCommented:
Nothing was deleted (I can see all)
You can do a lot with an alert, e.g. you can ask the question do you want to leave. If they click Ok then you can redirect to a new page or just stay where you are
Some example code

var r=confirm("Do you want to leave");
 if (r==true)
   {
   alert("I'll redirect in you in a while")
   }
 else
   {
   alert("Oh well stay here then")
   } 

Open in new window

http://jsfiddle.net/GaryC123/d6e9a/

Of course you're limited to the OK/Cancel
0
InsoftserviceCommented:
@RJV its confirm() and not alert().
Where client can decide whether to chose any one of them.
But i doubt now a days any one uses it, specially for new designs.
When we are in race to develop more and more attractive and fancy website to attract why anyone one will be willing to go to use old javascript pop up only for speed.
As the script provided can handle the same with little efforts on basic css and js work.

@RJV have you checked the code
0
RJVAuthor Commented:
@insoftservice, your solution looks interesting, as long as I can get fancybox out of the way (translated: I wish I'd coded that rather than chasing around looking at how it works and where, in several php files).

What happens now is that the user clicks on a submit button. Then there is a lot of activity accessing another server, database, etc. Meanwhile the fancybox stays open. Also depending on what happens on the access activities what was done in the fancybox form may not be accepted. At that point I need to display that it was not accepted and what to do about it.

Since that fancybox is still open, I can't display your solution! Right now I'm trying to see how I can get that fancybox closed when submit is pressed. Any ideas would be really welcome!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.