At the moment i have a normal button:
Sign up
Instead of sending it to a link immediatly i want it to display a popup window with mutliple options like this:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prompt
But instead of the textbox i would like it to display checkboxes with the site it will direct you to. (and you can only select one checkbox)
Quick example i made in paint:
http://oi57.tinypic.com/s5cvu1.jpg
Not sure if this is possible since i'm not experienced with working on websites.
Your question is very broad and I don't think SO is here to give you a tutorial but as a help for you to get started I suggest you check out window.open event that you will need to fire in order to open a pop up http://www.w3schools.com/jsref/met_win_open.asp then on the pop up window you will have to decide whether it's better to have a checkbox or a radiobutton, since you want that only one option is ticked and so on. I suggest you look on google for "pop ups getting started" and javascript. I hope that helps.
Use onclick method:
<a href="" class="button" onclick=Login(); >Sign up</a>
again define the method signup in Scrpt tag
<script>
Login()
{
}
</script>
For better understanding refer this example:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick
This is very simple example, alternatively, if u r aware of jquery, it will make your work very easy, going for jquery is better option.
http://jqueryui.com/dialog/
Related
Edit: Stackoverflow modify automatically the Amazon links when you click, so for see the popup, select, copy and paste the URLs in the browser.
On Amazon there is a link to open directly a side popup, like this:
https://www.amazon.com/dp/B07FKTZC4M/#aod (#aod open the popup)
where We can enter some filters. I tried different ways with no success to generate a link that open directly the site popup with new filter pre-applied.
So i need a link that open this page with "new filter" pre-applied:
I tried different solutions, but don't work, for example:
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new#aod
https://www.amazon.com/dp/B07FKTZC4M/ref=new#aod
https://www.amazon.com/dp/B07FKTZC4M/#aod_f_new=true
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new=true#aod
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new?ie=UTF8&f_new=true#aod
I see some informations on source page, maybe that help:
Question: Is there a way to create a link that open directly the side popup with new filter pre-applied? Maybe adding some parameters to the URL.
You can call a function in JavaScript with which you can change the z-index of the popup.
Something like this:
<button onclick="popup()" value="open popup">
Also make the popup. I am just making a rough one:
<div id="popup" style="z-index:1000; position: absolute;">Some code</div>
Remember to set the z-index at behind and the position. Then for JS i will make it simple in case you can't code JS
function popup(){
document.getElementById("popup").style.zIndex=-1;//basically changing the popup's z-index
}
This will just change the z-index of the popup which you must create yourself
I want to know how the pop up windows integrated into websites are built. I am trying to create one for my websites but i don't really know it is created whether they are plugins or not. Any help as to how to go about it.
Below is an example of what i want to do.
You can use hotjar.com to put a feedback box in your page, there is a lot of services that provides this feature, but hotjar gets the job done
Beginner! To make a pop-up like the one you provided, you would need to write backend code (Node.JS, PHP, Python, etc.). But for just a simple info pop-up with a button that activates the pop-up refer to this jsfiddle I created:
https://jsfiddle.net/d706dyg7/1/
$("#whateverid").click(function(){
//whatever code
});
That mean when that element is clicked blah happens.
Hope that helps,
Ben A.K.A BlackSky
P.S. If you want a solution in pure javascript and not jQuery just let me know and I will edit my fiddle!
I know I'm like .. 10 years late. But for anyone still wondering I thought I could be of some help!
If you want to do this using ONLY html and css (using a framework in visual studio like ASP.NET) for example.. here's what I did:
First, I made sure I had multiple "divs" in my code. For me specifically, I had two main ones. The first one whose id="main", and another whose id="popup" with the 'visible' property initially set to 'false' for the popup div.
Then, on whichever event you're looking for (button click for example) you'll simply set main.Visible = false and popup.Visible = true, then you could have more buttons in your popup (yes, no, cancel, confirm, etc.) which do the exact same thing, but in reverse!
The most important thing to make sure of is that you have the 'runat="server"' property in your divs so that you can access them in your CS code
Hope this was helpful! :)
Your looking for something called a modal. Depending how you wrote your HTML there are different ways of approaching this issue.
If your wrote your website in Plain HTML you can use the following tutorial to create one
www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/amp/
However if you wrote your website with a library such as Bootstrap they have built in pre made modules that you can attach to your cpde. These can Ben found in the library's documentation.
I need to be able to have a popup, preferably like a lightbox that displays an html message when a user clicks a link. The popup will populate the screen and the user will have to click "OK" after reading the message. How can this be done using lightbox? I'd rather avoid using a boring prompt as its much less attractive.
http://lokeshdhakar.com/projects/lightbox2/
You might be able to do it in lightbox, but as far as I can tell it's not quite what lightbox was intended for. You may want to consider a more generic "modal" type of solution. A common one is jQuery UI's Dialog. Another common one is Bootstrap's modal solution.
I try to use the perl script to automate the interaction with a website.
I use module WWW::Mechanize to realize my design. But I cannot perform the button click in my perl script by using command as below.
$mech->click( $button [, $x, $y] )
$mech->click_button( ... )
It is because this button does not belongs to any form and without name, I can not call or locate this button in my perl script. How can I make it possible to click this button in my perl script like I interact with browser? Thank you.
<button class="button transactional" id="checkout-now"><span>Check Out Now</span></button>
If button does not belong to any form it should have onclick event defined, like #Bilzac and #hijack mentioned. In this case you are not able to reproduce browser's behavior because WWW::Mechanize does only html analysis.
Dealing with JavaScript events it's more easy to implement browser's network activity rather then implementing whole JavaScript events and DOM interaction.
Well sometimes all you need is $mech->post() because it's harder to find what going on with JavaScript when you click some element.
So you need to find what request is performed when you click this button (you may use Firefox HttpFox for this) and after that construct same request using WWW::Mechanize:
$mech->post($request_url, Content => {FORM_FIELDS...});
You can add onclick event on this button. like this:
<button onlick="alert('hello');">Click Me</button>
Clicking the button in a browser only runs a piece of JavaScript. You can't do that in WWW::Mechanize, because it has no JavaScript support.
What you could do, however, is find the JavaScript code that's being run when the button is clicked and write some Perl code to do the same thing. Unfortunately, it can sometimes be hard to find which JavaScript event handlers apply to an element. Even the otherwise excellent Firebug doesn't seem to have any simple way to list all event handlers associated with an element. (There does exist an Eventbug extension, but at a glance it doesn't seem to work very well.) The Visual Event bookmarklet might also be worth trying.
I am not 100% sure what you are asking for, but I am going to swing at it.
You do not need the button to be part of a form for any sort of interactivity. You can do this with just JavaScript & HTML.
$('#checkout-now').click( function() {
alert('Hello!');
//Do other stuff here, regarding the form! (Call Perl scripts etc.)
});
http://jsfiddle.net/fCdxR/1/
Quick example of how it works!
Hope this solves your problem.
I have this project that I need a modal box to appear when they login for the first time.
I'm using a class called superbox which works well but it's activated by clicking links with href and rel attributes attached.
So I was wondering if there was a way of auto clicking the link on page load.
This is the link below:
Open
Any help would be appreciated,
Thanks.
Okay basically, auto clicking literally doesn't exist. But you can activate the box on pageload.
$(document).ready(function () {
//alert('page was loaded!');
SomeSuperBoxOpeningFunction('content', '470x225');
});
EDIT
But since there is no such feature in superbox plugin. Then lets make a totally alternative fix for that:
http://jsfiddle.net/hobobne/8FLkx/
This is a very very simple idea behind showing some boxes.
I checked the sourcecode of your superbox and found the the following function:
function showBox(curSettings, $elt)