CODEWITHSUNDEEP
javascriptjquerycsshtml
Sangamesh Hs
Sangamesh Hs

Reputation: 1447

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.

Upvotes: 0

Views: 1121

Answers (2)

Leo
Leo

Reputation: 345

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.

Upvotes: 1

Anubhav
Anubhav

Reputation: 7208

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:

  1. first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself

  2. next i gave it a hidden css style to the parent which contained all the divs.

  3. 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

  4. 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.

Upvotes: 1

Related Questions