What is the best way to handle modal popups on a website? - javascript

Would the proper way to add them be
A) hiding the div contents on the page and showing it when bound to a click
OR
B) just fetching the data asynchronously and loading it into an empty div that's hidden on the page?
Per the responses below... Use cases? Here:
1) Logging in
2) Showing a "share modal box w/ social sharing stuff"
3) Submission of data

I personally like to create them on-the-fly.
dialog = $("<div></div>");
dialog.html(content);
dialog.dialog({modal:true});
This is using jQuery UI's dialog feature, but just wanted to example creating on the fly.

I would say the best way to go far would be to use the FancyBox Plugin
All the examples you need have a DEMO here

Related

Best way to display various information in bootstrap or other jquery dialog box

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.

Adding DIV's inside modal dialog HTML5

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.

html look up field

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.

How to make a jquery popup menu

I am trying to make a Login popup window. For example, if someone clicked the login button a popup window will show and it will change the opacity of the main page and give focus to the popup window.
Here is an example of a web site that utilizes what I want to implement.
You can use the jquery dialog referenced in your post for this.
Here is an example of how to create form elements on it.
you could use jqueryUI dialog
you could also use the jQuery BlockUI plugin:
http://plugins.jquery.com/project/blockUI
I've used the Boxy plugin before, it's very lightweight (lighter than JQueryUI, although not as much functionality).
It's very easy to use, it was the first plugin I used when learning jQuery.
http://jqueryui.com/dialog/#modal-form
use this site link
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

Pop up box in Ruby on Rails

I want to display a popup windo on my rails application... Here is exactly what i want is . I have the line called "My profile" (for link i used link_to). if user clicks the link the popup should come out and displays the user's profile details.... i tried with :popup => 'true' option but it creates new window. i want some Ajax kind of stuff... can any one help me on this.
This is not a ruby-on-rails question. What you need is some javascript library to do that. As mentioned by Salil, lightbox is one such library. Others include:
colorbox
jQuery UI dialog
Fancybox
shadowbox
I personally tried lightbox, thickbox (no longer supported), colorbox, and shadowbox, and found colorbox to best fit my needs.
use lightbox to achive it.Rails provide lightbox_helper plugin.
Here is the path I would follow: First, you "load" data from your application with the JQuery load function. For this you can use a normal controller action with a some basic view. Then, you want to put it in a fancy Jquery popup, e.g. explained here

Categories

Resources