ورود

MehrdadSalahi · 26-06-1394، 10:38 ب.ظ

سلام بر مهندس عزیز.
می‌خواستم بدون استفاده از jquery ui پنجره‌ی دیالوگ بسازم. منتها نمی‌دونم باید چطوری این کار رو انجام بدم. یه چیزایی تو ذهنم هست، ولی نمی‌دونم درست هست یا نه؟ تو اینترنت چیزی پیدا نکردم.

کسی از دوستان میتونه کمک کنه؟؟
ممنون می‌شم.

habibvafapour · 27-06-1394، 02:28 ب.ظ

با لایت باکس هم میتونی که اونم دوباره کتابخانه جی کوئری رو میخواهد

از کتابخانه bootstrap هم میتونی استفاده کنی
http://getbootstrap.com/javascript/#modals

bgsrb88

(27-06-1394، 02:28 ب.ظ)habibvafapour نوشته: با لایت باکس هم میتونی که اونم دوباره کتابخانه جی کوئری رو میخواهد

از کتابخانه bootstrap هم میتونی استفاده کنی
http://getbootstrap.com/javascript/#modals

شرمنده که اینو میگما فکر کنم دوستان تاپیک میزارن تا به جواب برسن Rolleyes

<!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>

habibvafapour

قبلا چت کردیم اصلا نمیخواست از کتابخانه جی کوئری استفاده کنه
تجربه چرا کد کار نمیکنه ؟

bgsrb88 · 27-06-1394، 05:31 ب.ظ

خیلی فرق هست بین jquery ui و jquery
درضمن اون چند خط هم با pure js هم قابل پیاده سازی هست

تست کردم کار میکنه.

MehrdadSalahi · 28-06-1394، 03:41 ب.ظ

دستت درد نکنه دوست عزیز. خیلی لطف کردی.

واقعا متشکرم!!!

ورود
نام‌کاربری
رمزعبور:	فراموشی رمزعبور
	مرا به‌خاطر بسپار.