سلام بر مهندس عزیز.
می‌خواستم بدون استفاده از jquery ui پنجره‌ی دیالوگ بسازم. منتها نمی‌دونم باید چطوری این کار رو انجام بدم. یه چیزایی تو ذهنم هست، ولی نمی‌دونم درست هست یا نه؟ تو اینترنت چیزی پیدا نکردم.
کسی از دوستان میتونه کمک کنه؟؟
ممنون می‌شم.
(27-06-1394، 02:28 ب.ظ)habibvafapour نوشته: [ -> ]با لایت باکس هم میتونی که اونم دوباره کتابخانه جی کوئری رو میخواهد
از کتابخانه bootstrap هم میتونی استفاده کنی
http://getbootstrap.com/javascript/#modals
شرمنده که اینو میگما فکر کنم دوستان تاپیک میزارن تا به جواب برسن 
<!DOCTYPE html>
<html class=''>
<head>
<meta charset='UTF-8'>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script>
$(function(){
var Modal={
init:function(){
$("[data-toggle=modal]").click(function(e){
var id=$(this).data('id');
$("#"+id).addClass("on");
});
$("[data-modal=close]").click(function(e){
$(this).closest('.modal').removeClass("on");
});
}
}
Modal.init();
});
</script>
<style>
body {
color: #333333;
font-family: 'Helvetica', arial;
height: 80em;
}
.wrap {
padding: 40px;
text-align: center;
}
hr {
clear: both;
margin-top: 40px;
margin-bottom: 40px;
border: 0;
border-top: 1px solid #aaaaaa;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaaaaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
/*
* Modal Component
*/
.modal:before {
content: "";
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:before {
display: none;
}
.modal.on:before {
display: block;
}
.modal.on .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left:0;
right:0;
margin:0 auto;
width: 90%;
top: -100%;
z-index: 11;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-dialog.modal-sm {
width: 360px;
}
.modal-dialog.modal-md {
width: 600px;
}
.modal-dialog.modal-lg {
width: 900px;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eeeeee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eeeeee solid 1px;
text-align: right;
}
</style>
</head>
<body>
<div class="wrap">
<h1>Modal - Pure CSS (no Javascript!)</h1>
<hr />
<a href="#" class="btn btn-big" data-toggle="modal" data-id="modal-one">Modal!</a>
</div>
<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-header">
<h2>Modal in CSS?</h2>
<a href="#" class="btn-close" data-modal="close" aria-hidden="true">×</a>
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-modal="close">OK!</a>
</div>
</div>
</div>
</div>
<!-- /Modal -->
</body>
</html>
قبلا چت کردیم اصلا نمیخواست از کتابخانه جی کوئری استفاده کنه
تجربه چرا کد کار نمیکنه ؟
خیلی فرق هست بین jquery ui و jquery
درضمن اون چند خط هم با pure js هم قابل پیاده سازی هست
تست کردم کار میکنه.
دستت درد نکنه دوست عزیز. خیلی لطف کردی.
واقعا متشکرم!!!