ایجاد دیالول+در وسط صفحه نمایش

[hassanmosavi]

سلام خدمت دوستان عزیز
من دارم یک دیالگ درست میکنم.
یک دایو که پوزیشنش ابسولوته و زدایندکسش بالای
و با تاپ و لفتی که دادم وسط سایت قرار میگیره
حالا مشکل این جاست که مشخصاتی (چپ و بالا) همیشه وسط صفحه نمایش نیست
یعنی اگر سایت ده صفحه اسکرول بخوره وقتی پنل باز بشه همون بالا در وسط صفحه اول باز میشه
من میخوام وسط صفحه نمایشم باز شه
یعنی مثلا اگر سایت چند صفحه اسکرول داشت و من اول صفحه بودم دیالوگ پس از باز شدن کاملا در وصطصفحه نمایش دیده بشه
اگر هم قسمت اخر اسکرول بودم بعد از بازشدن دیالوگ بدون هیچ مشکل و جابجایی در وسط فحه نمایش داده بشه.





[*=left]position: absolute;
[*=left]top: 250px;
[*=left]left: 600px;
[*=left]z-index: 1000;
[*=left]border: 1px;
[*=left]border-style: double;
[*=left]padding: 5px;
[*=left]display: block;



کدی که الان نوشتم و مشکل داره

[Mori Bone]

سلام.

position: absolute;
right: 50%;
top: 50%;
height: 200px;
width: 500px;
margin-top: -100px;
margin-right: -250px;
margin-left: 0px;
margin-bottom: 0px;

[hassanmosavi]

نه روش پیشنهادی شما جواب نمیدهشاید وقتی صفحه اسکرول نخورده باشه و دکمه نمایش دهنده پنل در بالای صفحه قرار داده شده باشه.پنل در وسط صفحه به نمایش در بیایدامااگر صفحه اسکرول داشته باشد و دکمه نمایش دهنده پنل در دیگر صفحات باشد(در قسمت اسکرول شده)وقتی روی دکمه کلیک شود پنل در مکان مناسبی نمایش داده نمی شود.به عبارتی در وسط صفحه اول نمایش داده می شود.

[tooka123]

سلام اینو امتحان بکنید

<style>
.body{
height:900px;
}
.dialog-content{
width:100%;
height:100%;
background-color:#000;
opacity:0.3;
position:fixed;
top:0;
left:0;
}
.dialog{
margin:0 auto;
width:30%;
height:200px;
background-color:#FFF;
position:fixed;
right:35%;
top:20%;
}
</style>
<div class="body">
body
</div>

<div class="dialog-content">
<div class="dialog">content</div>
</div>

[hassanmosavi]

ممنون از کمکاتون اما بازم فکر کنم متوجه منظورم نشدین
1-شما یک صفحه html رو در نظر بگیرین که داخلش متن سه صفحه ورد رو وارد کردین
درنتیجه وقتی صفحه وب رو باز میکنین اسکرول داره
درست تا اینجا که موردی نیست.

2- حالا شما در متون وارد شده یک سری دکمه دارین که وقتی روش کلیک میشه دیالگ مورد نظر با یه سری اطلاعات لود میشه.
3- حالا وقتی کاربر رو دکمه ای که اول صفحه وب قرار داره(صفحه اول ورد مثلا) کلیک میکنه دیالگ وسط صفحه نمایش داده میشه که موردی نداره
4- اما اگر دکمه در اخر صفحه وب (صفحه سوم ورد مثلا) باشه یعنی صفحه اسکرول شده باشه وقتی کاربر روی دکمه کلیک میکنه
پنجره دیالگ دوباره همون جای اول باز میشه(وسط صفحه اول)، در صورتی که باید وسط قسمتی که کاربر داره توی مانیتور میبینه باز بشه.

[tooka123]

فکر کنم همون کد قبلی چیزی بود که شما می خواهید ، کد زیر کامل ترش هست در دیالوگ ها واسه اینکه پنجره همیشه با وجود اسکرول دیده بشه باید با position:fixed ثابت بشه

<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('.dialog-content').fadeIn();
});
});
</script>
<style>
.content{
height:800px;
}
.dialog-content{
width:100%;
height:100%;
background-color:#000;
opacity:0.3;
position:fixed;
top:0;
left:0;
display:none;
}
.dialog{
margin:0 auto;
width:30%;
height:200px;
background-color:#FFF;
position:fixed;
right:35%;
top:20%;
}
</style>
<div class="body">
<button>button</button>
<div class="content"></div>
<button>button</button>
</div>

<div class="dialog-content">
<div class="dialog">content</div>
</div>