- 정보공유
[JQUERY] jQuery Dialog
[code]
<html>
<head>
<title>jQuery</title>
<script src="lib/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="lib/ui.dialog.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ui-dialog').dialog();
});
</script>
<style>
#ui-dialog {
margin: 0; padding: 0; border: 0; outline: 0;
border: 1px solid #dddddd;
}
</style>
</head>
<body>
<div id="ui-dialog" title="title">
<div class="ui-dialog-content" id="dialogContent" title="">
I'm in a dialog!
</div>
</div>
</body>
</html>
[/code]
[code]
<html>
<head>
<title>jQuery</title>
<script src="lib/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="lib/ui.dialog.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#ui-dialog").dialog({
buttons: {
"Ok": function() {
alert("Ok");
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
<style>
#ui-dialog {
margin: 0; padding: 0; border: 0; outline: 0;
border: 1px solid #dddddd;
}
.ui-dialog-titlebar {
margin: 0px;
border: 0px;
padding: 10px 0px 0px 10px;
outline: 0px;
height: 17px;
font-size: 12px;
color: #555555;
background: #e6e6e6;
border-bottom: 1px solid #d3d3d3;
position: relative;
}
.ui-dialog-titlebar-close {
margin: 0;
padding: 0px;
border: 0; outline: 0;
text-decoration: none;
right: 10px;
top: 10px;
position: absolute;
}
.ui-dialog-content {
margin: 0;
padding: 10px 0px 0px 10px;
border: 0; outline: 0;
line-height: 1.3;
font-size: 12px; text-decoration: none; list-style: none;
color: #222222;
}
.ui-dialog-buttonpane {
bottom: 0;
width: 100%;
text-align:center;
height: 30px;
border-top: 1px solid #dddddd;
background: #ffffff;
position: absolute;
}
</style>
</head>
<body>
<div id="ui-dialog" title="title">
<div class="ui-dialog-content" id="dialogContent" title="">
I'm in a dialog!
</div>
</div>
</body>
</html>
[/code]
<html>
<head>
<title>jQuery</title>
<script src="lib/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="lib/ui.dialog.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ui-dialog').dialog();
});
</script>
<style>
#ui-dialog {
margin: 0; padding: 0; border: 0; outline: 0;
border: 1px solid #dddddd;
}
</style>
</head>
<body>
<div id="ui-dialog" title="title">
<div class="ui-dialog-content" id="dialogContent" title="">
I'm in a dialog!
</div>
</div>
</body>
</html>
[/code]
[code]
<html>
<head>
<title>jQuery</title>
<script src="lib/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="lib/ui.dialog.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#ui-dialog").dialog({
buttons: {
"Ok": function() {
alert("Ok");
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
<style>
#ui-dialog {
margin: 0; padding: 0; border: 0; outline: 0;
border: 1px solid #dddddd;
}
.ui-dialog-titlebar {
margin: 0px;
border: 0px;
padding: 10px 0px 0px 10px;
outline: 0px;
height: 17px;
font-size: 12px;
color: #555555;
background: #e6e6e6;
border-bottom: 1px solid #d3d3d3;
position: relative;
}
.ui-dialog-titlebar-close {
margin: 0;
padding: 0px;
border: 0; outline: 0;
text-decoration: none;
right: 10px;
top: 10px;
position: absolute;
}
.ui-dialog-content {
margin: 0;
padding: 10px 0px 0px 10px;
border: 0; outline: 0;
line-height: 1.3;
font-size: 12px; text-decoration: none; list-style: none;
color: #222222;
}
.ui-dialog-buttonpane {
bottom: 0;
width: 100%;
text-align:center;
height: 30px;
border-top: 1px solid #dddddd;
background: #ffffff;
position: absolute;
}
</style>
</head>
<body>
<div id="ui-dialog" title="title">
<div class="ui-dialog-content" id="dialogContent" title="">
I'm in a dialog!
</div>
</div>
</body>
</html>
[/code]
첨부파일
- simple-dialog-waitzero.zip (38.2K) 169회 다운로드 | DATE : 2013-01-10 11:27:39