Monday, 15 April 2013
javascript - Display a div as popup using Jquery on button click -
I am learning Jquery and came to this problem where I had to display the display popup on the click button on the same window. Suggestions on how to get it?
You can use the jquery UI dialog, or, if you want to receive more .. Fancy, you can use it:
$ (document) .ready (function () {$ (" a # inline "). Fancybox ({'hideOnContentClick': true});}); .btn {boundary: 1px solid # 006; Color: # 01ACEE; Font: bold 16px tahoma; Border-Radius: 7px; Padding: 4px; } & lt; Link rel = "stylesheet" href = "http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.css" type = "text / css" media = "screen" /> & Lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://dodsoftware.com/sotests/fancy/jquery.easing-1.3.pack.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://dodsoftware.com/sotests/fancy/jquery.mousewheel-3.0.4.pack.js" & gt; & Lt; / Script & gt; & Lt; An id = "inline" class = "btn" href = "#data" & gt; My button & lt; / A & gt; & Lt; Div style = "display: none" & gt; & Lt; Div id = "data" & gt; & Lt; Img alt = "" src = "http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg" & gt; & Lt; Br> & Lt; H3 & gt; My cool title & lt; / H3 & gt; & Lt; P & gt; Get your cool items here; & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;