im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?
You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.
It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?
I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.
Related
So I am developing a website (ASP.Net Core MVC) and I am trying to display a container, with potentially lots of data inside, as soon as I click on a Button see the image.
Each row has its add button. There will be only around 10-30 buttons on a page at once. As soon as you click on such a button the showed pop up should display next to the clicked button. As you can see in the picture the pop up may contain a lot of data itself. And this data might differ from each row.
What is the best approach?
Placing each these pop ups already in the HTML and on click display: block and display: none when hovering away.
With jQuery and using the append method and summon the popup next to it and remove it after hovering away.
Or is there even a different approach to this?
Why am I asking?
I am concerned in terms of performance and loading time.
In my opinion there are downsides and upsides to both approaches.
For approach 1:
This will cause a slower initial load time but will be faster to use than approach 2 when it's loaded.
Approach 2:
A downside to this is jQuery needs to be loaded for this. I don't know if you use it throughout your project. But just for this, it would be a little bit overkill.
However initial loadtime can be fast and you could use AJAX to load each data when it's clicked.
I'm not a programmer with 10 years of experience, so this answer is pure my opinion and what I think about it.
Hope this opens a discussion!
I have created custom Issue Tab Panel with field, where I can add comment when Ill press my custom button “add comment”
In my VM template I have
AJS.$("#add-comment-button").click(function(e) {
e.preventDefault();
AJS.dialog2("#add-status-comment").show();
});
This button works fine and window to write text appears, but… In other section in Issues --> Current Search —> Views (Detail Views), windows with space to write text dont appear when I click button “add comment”. It only appers in normal view of issue… Whats problem?
I'm not sure if I understand your question right so I'll give it a try. Maybe it helps in one or the other way.
As you didn't provide the code affecting the window I assume it is possible you are retrieving the issue key or issue id. There are some Jira JS calls that don't work in every view. The reason is unknown to me, but maybe if you use different calls it will work.
Here is the question and answer to this field availability problem on the atlassian community: https://community.atlassian.com/t5/Jira-questions/Get-issueID-in-JavaScript-in-Project-Screen-viewing-issue/qaq-p/824175
Otherwise you should provide some more information.
Regards
Chris
What I want help on is, when a user clicks a link (existing images), it opens a window (I have done this). In this window I have a list of current images on the server, If a user selects a image (via radio button - then submits), it passes the id from the child to the parent.
I tried manipulating a js calendar pop-up script, but with no luck. I am not a good js/jQuery coder, and I hope that someone can help me with this, nice and simple.
I am using Django as my backend code if that makes any difference.
Thanks
This article dissected Django's way of making "popups that return a value".
Also, here's a recent implementation which could inspire you.
I just need a little advice on what may be the best method for handling my situation.
I'm in need of placing three buttons in the sidebar of the website I maintain. The website is massive and hard to handle. Currently, it's all HTML files (there are over 10,000 of them believe it or not). We're transitioning to a database website so I don't want to make any sweeping changes that are site-wide, as they may just be scrapped in our re-design process in coming months.
However, these buttons are for an application process. When you click on them, an alert box will need to pop up to give you a bit of information and they either allow you to cancel the action or proceed. The buttons are currently located in the left nav which is included on every page of the website.
Would it be possible to accomplish this using JS or jQuery? I'd be unable to easily add scripts into the tags on all of the applicable pages, but I'd like to avoid the browser driven "http://www...Says: blah blah" message if possible. Any insight is greatly appreciated! Thank you!
Check out the jQueryUI dialog examples, particularly the modal boxes, although you will have to add the script to every page.
Have you come across those websites that grey out the full browser window and show you a notification or ask you to fill in a survey .. etc? This used to happen with myspace, if you mistyped in the email or password the full browser window would grey out (it's transparent though, you still can see the contents of the page through it) and a the login controls would display in the center of the browser window with an error message above them telling you that you mistyped the email or password. Unfortunately they removed this from myspace, I want the same code for a website I'm working on and was trying to avoid reinventing the wheel, do you know of any source to find this code instead of writing the whole thing again? I assume this is mostly CSS, Javascript is only used for showing/hiding, am I right?
If you're thinking of using a JavaScript framework, jQuery has the Block UI plugin. Very easy to use and configure.
Demos here
You can also use only CSS and Javascript for this: Create a Modal Dialog Using CSS and Javascript and submodal
These are called 'modal' windows. To avoid reinventing the wheel, use existing libraries like JQuery. Googling 'jquery modal window' brings up lots of results that look like exactly what you want. You could either pick one of these if it does exactly what you want, or find one with good source to deconstruct.
If you prefer prototype.js, there's Prototype Window Class, doing what you want, see alert dialog sample.
If you are working in asp.net and want a quick and easy tool for this get the ajax toolkit. Then use the modal popup control. Here is the example on the AJAX PAGE