رفتن به مطلب

برنامه پنجره dialog


پست های پیشنهاد شده

سلام دوستان

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


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


<link rel="stylesheet" href="[url="http://fazanet.ir/css/dialog.css"]http://fazanet.ir/css/dialog.css[/url]">

<!--[if lt IE 9]>
<script src="[url="http://fazanet.ir/js/html5.js"]http://fazanet.ir/js/html5.js[/url]"></script>
<![endif]-->


<script src="[url="http://fazanet.ir/js/jquery.min.js"]http://fazanet.ir/js/jquery.min.js[/url]"></script>
<script src="[url="http://fazanet.ir/js/dialog.js"]http://fazanet.ir/js/dialog.js[/url]"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function(e) { // Button which will activate our modal
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
</script>



<div id="modal">
<div id="heading">
ثبت نام در سایت
</div>

<div id="content">
<p>Clicking yes will make Comic Sans your new system default font. Seriously, have you thought this through?</p>

<a href="#" class="button green close"><img src="[url="http://script-host.ir/source/images/tick.png"]http://script-host.ir/source/images/tick.png[/url]">Yes, do it now!</a>

<a href="#" class="button red close"><img src="[url="http://script-host.ir/source/images/cross.png"]http://script-host.ir/source/images/cross.png[/url]">No, I’m insane!</a>
</div>
</div>




<a href="#" id="button" style="margin-top:-1px;padding-right:16px;" title="ثبت نام">ثبت نام</a>

لینک به ارسال

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

لینکی برای ثبت نام قراره بگیره و پس از کلیک روی آن پنجره دیالوگ مربوط به ثبت نام باز شود

لینکی برای ورود کاربران قرار بگیره و پس از کلیک روی آن پنجره دیالوگ مربوط به ورود کاربران باز شود

اما با کد بالا فقط می شه یک دیالوگ باکس ساخت نه چند تا امیدوارم متوجه منظور من شده باشید.

لینک به ارسال

چند بخش رو باید تکرار کنید


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="[url="http://fazanet.ir/css/dialog.css"]http://fazanet.ir/css/dialog.css[/url]">
<!--[if lt IE 9]>
<script src="[url="http://fazanet.ir/js/html5.js"]http://fazanet.ir/js/html5.js[/url]"></script>
<![endif]-->

<script src="[url="http://fazanet.ir/js/jquery.min.js"]http://fazanet.ir/js/jquery.min.js[/url]"></script>
<script src="[url="http://fazanet.ir/js/dialog.js"]http://fazanet.ir/js/dialog.js[/url]"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function(e) { // Button which will activate our modal
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
$('#button2').click(function(e) { // Button which will activate our modal
$('#modal2').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
</script>

<div id="modal">
<div id="heading">
ثبت نام در سایت
</div>
<div id="content">
<p>Clicking yes will make Comic Sans your new system default font. Seriously, have you thought this through?</p>
<a href="#" class="button green close"><img src="[url="http://script-host.ir/source/images/tick.png"]http://script-host.ir/source/images/tick.png[/url]">Yes, do it now!</a>
<a href="#" class="button red close"><img src="[url="http://script-host.ir/source/images/cross.png"]http://script-host.ir/source/images/cross.png[/url]">No, I’m insane!</a>
</div>
</div>
<div id="modal2">
<div id="heading">
ثبت نام در سایت
</div>
<div id="content">
<p>Clicking yes will make Comic Sans your new system default font. Seriously, have you thought this through?</p>
<a href="#" class="button green close"><img src="[url="http://script-host.ir/source/images/tick.png"]http://script-host.ir/source/images/tick.png[/url]">Yes, do it now!</a>
<a href="#" class="button red close"><img src="[url="http://script-host.ir/source/images/cross.png"]http://script-host.ir/source/images/cross.png[/url]">No, I’m insane!</a>
</div>
</div>


<a href="#" id="button" style="margin-top:-1px;padding-right:16px;" title="ثبت نام">ثبت نام</a>
<a href="#" id="button2" style="margin-top:-1px;padding-right:16px;" title="ثبت نام">ثبت نام</a>

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...