Creating Pop up Window on Jquery

Asked By 0 points N/A Posted on -
qa-featured

I want to know how to add a pop up window on my page that will display additional information regarding my product using XC Jquery Widget.

Is it possible?

If so, how can I do that?

SHARE
Best Answer by Cathy morthy
Go To Solution
Best Answer
Best Answer
Answered By 5 points N/A #115045

Creating Pop up Window on Jquery

qa-featured

Please find the following example for your query

First you have to download the latest version of jQuery from their site.

Unzip the folder where you want it and add the following code in the <head > element in your code.

<script src="js/jquery.js" type="text/javascript"></script>

After you complete this you have to create within the page the place holder for your content. Then add the following code before the <body> element in your code.

<div id="popup" style="display: none;"></div>
<div id="window" style="display: none;">
<div id="popup_content"><a href="#" onclick="Close_Popup();">Close</a> </div>
</div>

Next CSS part

In this part we just want define the way we like to display the pop up window.

#popup {
height: 100%;
width: 100%;
background: #000000;
position: absolute;
top: 0;
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
filter:alpha(opacity=75);
}

#window {
width: 600px;
height: 300px;
margin: 0 auto;
border: 1px solid #000000;
background: #ffffff;
position: absolute;
top: 200px;
left: 25%;
}

In first part of code we will get the black background with 75% of opacity that takes the full page. In the second part we just position the window itself.

Jquery code

After you completed the html and css preparation you should have your pop up ready to display.

<script type="text/javascript">
function Show_Popup(action, userid) {
$('#popup').fadeIn('fast');
$('#window').fadeIn('fast');
}
function Close_Popup() {
$('#popup').fadeOut('fast');
$('#window').fadeOut('fast');
}
</script>

In this the first part is to open the pop up and the second one is to close the same.

After this what you have to do is you have to trigger these function when you click somewhere.

About Cathy morthy
Questions
2
Answers
19
Best Answers
6
  • Posted on -
  • Question Category:
Answered By 5 points N/A #115046

Creating Pop up Window on Jquery

qa-featured

Hello,

You can do that by doing simple task. I am showing you how to do that.

Step1. Setup your environment

First of all you have to download the latest version of jQuery.

Now, install it and be ready to commence operations, add your site to the top of these lines in the element <head>:
<script src="js/jquery.js" type="text/javascript"></script>

This takes place, it is necessary to create the substance of the placeholder in the page, add these lines before the </ body> in your code.

<div id="popup" style="display: none;"></div>
<div id="window" style="display: none;">
<div id="popup_content"><a href="#" onclick="Close_Popup();">Close</a> </div>
</div>

The lines will create two nested divs not so you can get the transparency level Popup and Layer Window. If you put another div inside the window, you will see a legacy of transparency and that is not what we want here.

Step2. The css


In this section we will define how we want to see the windows, you can use nested CSS or simply put them in a separate file.


#popup {
height: 100%;
width: 100%;
background: #000000;
position: absolute;
top: 0;
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
filter:alpha(opacity=75);
}

#window {
width: 600px;
height: 300px;
margin: 0 auto;
border: 1px solid #000000;
background: #ffffff;
position: absolute;
top: 200px;
left: 25%;
}

You will notice that there are 4 lines to lay down transparent, that is to be on to receive are extremely great. If you do not really IE, you can skip the line filter.

What do we here?

75% can be added to the black background with a full page (you do not care if IE, I would recommend to change the location setting absolute. What then ever that we will need to enable JavaScript white when scrolling down the page.

The second reason is the different position.

It looks like this:

Step3. The jQuery code for the effects

We have prepared and wisdom, it is necessary that your client is ready to be displayed.
Contact hatred does not exist in the database, but now I'm not going inside, but at birth, and based on population rather than the near display. Immediately after the div created, add these lines;

<script type="text/javascript">
function Show_Popup(action, userid) {
$('#popup').fadeIn('fast');
$('#window').fadeIn('fast');
}
function Close_Popup() {
$('#popup').fadeOut('fast');
$('#window').fadeOut('fast');
}
</script>

And this is what you should do, now all but in some places you have to do is click on these functions enable you (perhaps using the event onclick = "Show_Popup ()" event)

Thank You !!

Palash Chowdhury

About Palash78
Questions
0
Answers
2
Best Answers
0
  • Posted on -
  • Question Category:

FaceBook clone to add on vBulletin page

Previous

Create Tiered Pricing Discounts on Xcart

Next

Related Questions