تالار گفتمان nCIS.ir

نسخه‌ی کامل: نیازمند امکانی مشابه modal در بوت استرپ
شما در حال مشاهده نسخه آرشیو هستید. برای مشاهده نسخه کامل کلیک کنید.

Abbas

سلام
میخوام یه باکس مخفی داشته باشم و بعد از کلیک روی یه دکمه
صفحه تار بشه و اون باکس نمایش داده بشه
مشابه modal توی بوت استرپ
راهنمایی می کنید چطور بدون بوت استرپ بنویسمش؟
یا لینک آموزشی؟
خب میتونی فقط از Modal اش استفاده کنی بدون اینکه باقی چیزها رو لود کنی
درهرصورت چیزی که زیاده Modal

http://forum.ncis.ir/Thread-%D8%A7%DB%8C...46#pid5446

http://www.w3schools.com/w3css/w3css_modal.asp


<!DOCTYPE html>
<html>
<title>Pur CSS & JS Modal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.modal {
   z-index: 1;
   display: none;
   padding-top: 100px;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
}
@media (max-width: 768px)
.modal-content {
   width: 500px;
}
.modal-content {
   margin: auto;
   background-color: #fff;
   position: relative;
   padding: 0;
   outline: 0;
   width: 600px;
}
.container {
   padding: 0.01em 16px;
}
.closebtn {
text-decoration: none;
   float: left;
   font-size: 24px;
   font-weight: bold;
   cursor: pointer;
   color: white;
   margin-left: -16px;
   background: #7F7F7F;
   width: 20px;

}
.container:after, .clear:after, .btn-group:before, .btn-group:after {
   content: "";
   display: table;
   clear: both;
}
</style>
<body class="container"  style="text-align: center;">
<h2>Pur CSS & JS Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="btn">Open Modal</button>
<div id="id01" class="modal">
 <div class="modal-content">
   <div class="container">
     <span onclick="document.getElementById('id01').style.display='none'" class="closebtn">×</span>
     <h1 style="text-align: center;">Pur CSS & JS Modal</h1>
     <p style="text-align: center;">Some text. Some text. Some text.</p>
   </div>
 </div>
</div>        
</body>
</html>