Develop Reference

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.

jQuery UI dialog remembers the first submit

I am trying to create a simple, non-WYSIWYG bbCode editor using jQuery. My approach is to make it modular, so that I can separately add different buttons with different actions to the editor toolbar. However - as a beginner in JavaScript -, I am facing with a problem.
Here is the simplified version of my code, which still produces the bug.
The dependencies
jQuery core
jQuery UI
jQuery selection plugin
a HTML page which has a <textarea> of the bbEditor class, like this one
The problem with the dialog
The bug is somewhere around my showUrlDialog() function. First time, after the page loaded, the insert URL action works fine. But at the following attempts somehow the dialog remembers the first-time given values, and inserts them instead of the currently given values.
My assumption is that the dialog object stays in the DOM, but I don't understand, how. It should disappear as the containing showUrlDialog() function ends.

Foundation 3 - customForms checkbox`es/radio buttons don't work when loaded dynamically

I'm working with Foundation 3.
And I'm having a problem with custom forms and javascript. I use reveal plugin for login and signup forms. if I load forms statically into HTML everything works fine. But if I load them dynamically (lets say ajax), check boxes and radio buttons don't work. Even after reviel I call "$.foundation.customForms.appendCustomMarkup". What should I do? I really like those custom checkboxes and radio buttons. How could I use them with dynamically loaded HTML?

I know this was asked a long time ago -- but incase anyone else comes across it, here's how you do it:
Let's say the container that your ajax is loaded in is <div id="myModal"></div>
After, your content is loaded, you've got to fire $('#myModal).foundation('forms');

Is there a way to have multiple dialog boxes with Twitter-Bootstrap?

I am using Twitter Bootstrap for everything and it's great but am at the point where I need multiple dialog boxes on the screen. I have not been able to find in the documentation how to do this so I'm assuming it is not something that is included.
I'm looking for something similar to jQuery-UI dialog boxes (NOT modals)
Is there a way to achieve this with Twitter Bootstrap without writing a new piece of code?

There is not problem in doing so. I've a project where it is working fine. There is one 'glitch' the backdrop is stacked so the backdrop (if you use it) of the first dialog is leading and for every dialog one gets stacked on top of it. The dialog you opened first is not greyed out. So probable you want to load you dialog with .modal("show", {backdrop: false}) after the first one and if possible you want your dialogs to be of the same size or bigger then the previously opened dialogs to circumvent the problem.
In our case it's an internal application, so this is not a big issue. But for a public website I could imagine this is a showstopper.

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