Solved

How to show a pop-up box in php

Posted on 2015-02-08
9
79 Views
Last Modified: 2015-02-19
hi there ,

How to create a popup box using in php. This box should appear on button click and hides automatically after a few seconds. Example is shown below . Please help :
Pop - up Box
0
Comment
Question by:Suneet Pant
9 Comments
 
LVL 12

Expert Comment

by:FarWest
ID: 40596971
I believe this is HTML5, jQuery Related function
if you want to change the message from server side then you can use AJAX
check this url
http://jqueryfordesigners.com/coda-popup-bubbles.1.html
0
 
LVL 74

Assisted Solution

by:käµfm³d 👽
käµfm³d   👽 earned 250 total points
ID: 40596973
You might look at toastr.js. It's built atop JQuery, and it's purpose is to creat such notifications.
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 40597000
Hey Suneet,

You don't show popup boxes in PHP - you do that client-side (in the browser) using javascript (probably jQuery).

Basically, the message box is a simple HTML element, such as a DIV, styled to look how you need it using CSS.

You haven't said how you want to activate the message, but a simple one-line of jQuery will give you the general idea:

$('#message').html('This is a message').fadeIn(500).delay(5000).fadeOut(500);

Open in new window


This will take an element with an ID of message, set the text, show it for 5 seconds and then hide it.

Style it with CSS - something along these lines:

#message {
   width: 400px;
   border: 1px solid green;
   position:absolute;
   top: 50px;
   background-color: #D2E9B1;
   display:none;
   padding: 10px;
}

Open in new window


If you need to do this after you've made an AJAX request, simply put the jQuery code in the .done() method.
0
 

Author Comment

by:Suneet Pant
ID: 40597749
hi I want to use this popup - when a user adds a new item in the cart. Here page will not be directed to a cart page instead on the same page a box on the upper side will appear which will say - 1 more item has added along with the small added text that will show total number of items in the cart.
This popup will hide automatically after a few seconds, allowing the user to add more item into the cart or check out.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:Suneet Pant
ID: 40597887
can anyone please help
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 40597901
Hey Suneet - I've already answered how to do it.

I assuming you add to your cart with an AJAX call. In the script that you call, you'll need PHP to output the information you want in the message (1 more item added and total number of items in the cart). You then need to put the code I posted into the success() or done() function of the AJAX call.

If you want to post your PHP script that adds to the cart and the jQuery code for adding to a cart, then I can take another look.
0
 

Author Comment

by:Suneet Pant
ID: 40597986
I've requested that this question be deleted for the following reason:

My Subscription has ended so I removing my question
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 40597987
Suneet,

Please don't just delete question, particularly when Experts have spent the time helping. Either continue to engage with them or accept an answer.

I've offered you the code to solve your problem.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now