Monday, 21 August 2017

Jquery-UI Dialog Box

<html>
<head>
<script src="jquery.js">
</script>
<script src="jquery-ui.js">
</script>
<link href="jquery-ui.css" rel="stylesheet"/>
<script>
$(document).ready(function()
{
$("#img1").hide();
$(".c1").mouseover(function()
{
$(this).css("opacity","0.6");
});
$(".c1").mouseout(function()
{
$(this).css("opacity","1");
});
$(".c1").click(function()
{
var str=$(this).attr("src");
$("#img1").attr("src",str);
$("#img1").dialog(
{
width:"750",
height:"450",
draggable:false,
resizable:false,
modal:false,
show:{effect:"explode",duration:2000},
hide:{effect:"explode",duration:2000},
buttons:[
{
text:"Exit",
click:function()
{
$("#img1").dialog("close");
}
}
]
});
});
});
</script>
<style>
.c1
{
height:150px;
width:180px;
border:1px solid black;
padding:5px;
margin:5px;
cursor:pointer;
}
</style>
</head>
<body>
<h1>Jquery-UI Dialog Box</h1>
<hr><br>
<img class="c1" src="Images1/images (1).jpg"/>
<img class="c1" src="Images1/images (2).jpg"/>
<img class="c1" src="Images1/images (3).jpg"/>
<img id="img1" src="Images1/images (1).jpg"/><br><br>
</body>
</html>

No comments:

Post a Comment