I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.
Related
I have 4 images, each image has its own information and images. Not a lot, but I need it to be displayed in a pop up box. I have decided to use Bootstrap as it's responsive and quite reliable for these thing.
My question is is there any way around copy and pasting the same information, for instance, I have 10 lines of the same code just to show the modal box i.e.
$("#smiley").click(function () {
$('#myModal').modal('show');
});
and 200 of information etc.
Here's example http://jsfiddle.net/jjehfiuehf/0ck8y5jx/
You click image and the modal box appears.
The dialog box doesn't seem to appear for some reason
Is it ok to have a full html page full of information or is there a way to condense it somehow??
Dialog box does not appear because of Jquery version you should use 2.1.3 on left side you have on jfiddle Frameworks & Extensions, framework can be changed.
2.it is OK to have all information in html, and if you do not want all information in html, you should use server side scripting, PHP or else.
You could use one modal and load the information dynamically from a PHP script using AJAX.
Put all of your images, 200 (whatever) of information, etc. into a PHP script - perhaps in an array.
In your HTML, include an ID or data-attribute that corresponds with the key in the array. Each one is unique.
Create a jQuery script that parses the ID or data-attribute, and then calls the PHP script via jQuery's .get() method, which then loads the content into the modal body and displays it.
You could also store all of these as separate HTML documents instead of putting them into PHP, and load each file accordingly...
Also, there's Varying modal content based on trigger button - which may be more inline to what you need
From the Bootstrap docs:
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
I have a application where i make all Divs clickable by using this code :
$("html").click(function(){
alert("Click");
return false;
});
This one work normally for all divs. Well, when Alert popup, the Background behind alert box cannot be clicked. How can i turn that to be clickable too?
PS: Right Click on the Background dont work too.
Thats not possible. You have to use a JS plugin doing the alert, so you can influence the behaviour (like the jquery ui modal widget, mentioned here). But with the browser alert this is not possible, as far as i know.
Not sure how to do exactly what you're asking (if it's possible). Maybe someone else can shed some light on that.
But a solution you could look into would be the dialog widget from jQuery UI. You can easily create pop-ups, modal or non-modal (meaning with the background faded out or not).
http://jqueryui.com/dialog/
They have some demos there, but it's as simple as created a div with some text and calling...
$("#the_div_id").dialog();
Other config parameters can be found from the API:
http://api.jqueryui.com/dialog/
By default its modal popup behaviour ,If you want to clickable
Assuming you are using Jquery Ui dialog
Try with the option modal
$('#selector').dialog("option","modal",false);
http://api.jqueryui.com/dialog/#option-modal
How to create an html look up field. So, I want to achieve
an html input field, with an icon/button next to it
when user click on it, a pop-up window displays with a search form (I assume this can be created beforehand and hide using javascript)
user apply search, and data is displayed in the same (pop-up) window
when user select a value and apply ok, the field value is copied to the original input filed, and pop-up window closes.
Any sample code? Is there any simple way without using any java script library? or any simple plugin for jquery.
thanks.
It would be possible, but very unwise to do this without any libraries or plug-ins.
I strongly recommend jQuery UI's Dialog widget. It's very simple, well documented and easy to use.
You will probably be interested specifically in how to use the Dialog to display a form. Click the View Source link on that page to see all of the mark-up and code required to achieve that effect.
I have a dropdown using JQuery on my site (www.hidcountry.com) but I am trying to make it dropdown but at the same time load content into the mainContent section on the right. The pages are PHP but I was told Javascript, Ajax or JQuery will help me do that but I'm so stuck right now... Anybody have an experience with this?
If you want content to change once someone selects a menu item in the drop-down, I would recommend using the jQuery library and binding a javascript function to the change event. This would then let you code a javascript function that you could use to change content in different areas of the page:
$('#my-drop-down').change(function(){ $('#content-area').html('Some HTML.'); });
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.