dialog box using jquery,javascript & php
1. Firstly for create a dialog box or alert window copy below code in your body
<!--dialog box start -->
<div id="dialog" title="Important Alerts">
<table>
<tr>
<td style="font-family: Trebuchet MS; font-size: 12pt; color: yellow; font-weight: bold;
padding: 5px" align="left">
<ul>
<li><a href="PDF/clc_notice_new.pdf" style="color: Yellow;" target="_blank">
Admission Notice - M Pharm, M Tech (Bio Tech), M Tech (data Sciences),M Tech (Cyber forensics) etc 2014-15 </a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVg1qQ2Jhjm_utgqNpYms0kUyuG2dstduSTQ1VmRWavQTYbrR9LdfFZjU8eVV_EcM0abbfEpR4sUiVzgObKhMYC7t8qTUEkxjlYGTxhn2UlZ-Fd6otc2l6Y60Fx3KXoixlEYF5yO1W55Z/s320/new.gif" alt="" />
<br />
</li> <br />
<!-- <li><a href="http://rgpv.ac.in/campus/DDADM14.htm" style="color: #00ff00;" target="_blank">
Allotment Lists for Admission to five year Dual Degree Integrated PG Programme </a>
<br />
</li> <br />-->
<li><a href="http://rgpv.ac.in/campus/pgadm14.htm" target="_blank" style="color: #00ff00">
3rd List of Short listed candidates for admission in ME/M.tech/M.Pharma courses
RGPV-2014</a>
<br />
</li> <br />
<li><a href="campus/1st_List_Shortlisted_MAM.pdf" target="_blank">First List of Shortlisted
Candidates for Admission in Master of Applied Management (MAM) course - 2014</a>
<!-- <img src="images/new.gif" alt="" />-->
</li>
</ul>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="Javascript" src="jquery-1.7.2.min.js" ></script>
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.22.custom.min.js" ></script>
<link href="jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language ="javascript" >
$(function () {
$("#dialog").dialog();
$( "#dialog" ).dialog({ height: 330 });
$( "#dialog" ).dialog({ width: 640 });
$("#dialog").dialog('option', 'position', 'center');
});
</script>
<!--dialog box end-->
2. and download following images in your image folder give the true path in above coding where
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVg1qQ2Jhjm_utgqNpYms0kUyuG2dstduSTQ1VmRWavQTYbrR9LdfFZjU8eVV_EcM0abbfEpR4sUiVzgObKhMYC7t8qTUEkxjlYGTxhn2UlZ-Fd6otc2l6Y60Fx3KXoixlEYF5yO1W55Z/s320/new.gif
and also save image by following link
3. now download the CSS file by click here or just copy paste the below URL
https://sites.google.com/site/ultimatecodingtricks/script/jquery-ui-1.8.22.custom.css
and also download these two javascript files or js files by click on below links
or just copy and paste below links
i ) https://sites.google.com/site/ultimatecodingtricks/script/jquery-1.7.2.min.js
ii ) https://sites.google.com/site/ultimatecodingtricks/script/jquery-ui-1.8.22.custom.min.js
4. now you will have to change the image path for close sign or image in jquery-ui-1.8.22.custom.css in line no 91 where is the code is
.ui-widget-header .ui-icon {background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpVqBmTsTRlK_7kSfXVwKzkR5aBkBatLJy27br4wb7tntefIBiKy4qOu15WX8ob4N0VlVol_oGnH8y9MJZEJHrWliprtSU0wCDMiGbFdO8yRb0vz4SGQGJdTTIhXEjzkGpUvr9jiLe2Gy6/s320/ui-icons_ffffff_256x240.png'); }
5. and manage you important links from HTML CODE (1 step)and manage the with and hieght by javascript (1 step).
No comments:
Post a Comment