آموزش ساخت Image Modal با استفاده از HTML و CSS3

در این مقاله می آموزید که یک Modal Image واکنش گرا با استفاده از CSS و جاوا اسکريپت ایجاد کنید

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

این مثال از اکثر کدهای مثال قبلی (Modal Box) استفاده کرده است، با این تفاوت که در این مثال از تصاویر استفاده میکنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

                              
                

                                    
                


                  
                  ×

                    
                  

                    
                  

                
                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

                                 /* Style the Image Used to Trigger the Modal */
                #myImg {
                  border-radius: 5px;
                  cursor: pointer;
                  transition: 0.3s;
                }

                #myImg:hover {opacity: 0.7;}

                /* The Modal (background) */
                .modal {
                  display: none; /* Hidden by default */
                  position: fixed; /* Stay in place */
                  z-index: 1; /* Sit on top */
                  padding-top: 100px; /* Location of the box */
                  left: 0;
                  top: 0;
                  width: 100%; /* Full width */
                  height: 100%; /* Full height */
                  overflow: auto; /* Enable scroll if needed */
                  background-color: rgb(0,0,0); /* Fallback color */
                  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
                }
                p{
                direction: rtl;
                }
                /* Modal Content (Image) */
                .modal-content {
                  margin: auto;
                  display: block;
                  width: 80%;
                  max-width: 700px;
                }

                /* Caption of Modal Image (Image Text) - Same Width as the Image */
                #caption {
                  margin: auto;
                  display: block;
                  width: 80%;
                  max-width: 700px;
                  text-align: center;
                  color: #ccc;
                  padding: 10px 0;
                  height: 150px;
                }

                /* Add Animation - Zoom in the Modal */
                .modal-content, #caption {
                  animation-name: zoom;
                  animation-duration: 0.6s;
                }

                @keyframes zoom {
                  from {transform:scale(0)}
                  to {transform:scale(1)}
                }

                /* The Close Button */
                .close {
                  position: absolute;
                  top: 15px;
                  right: 35px;
                  color: #f1f1f1;
                  font-size: 40px;
                  font-weight: bold;
                  transition: 0.3s;
                }

                .close:hover,
                .close:focus {
                  color: #bbb;
                  text-decoration: none;
                  cursor: pointer;
                }

                /* 100% Image Width on Smaller Screens */
                @media only screen and (max-width: 700px){
                  .modal-content {
                    width: 100%;
                  }
                }
                

قدم سوم :   کد جاوا اسکریپت را اضافه کنید.
مثال :

                // Get the modal
                var modal = document.getElementById("myModal");

                // Get the image and insert it inside the modal - use its "alt" text as a caption
                var img = document.getElementById("myImg");
                var modalImg = document.getElementById("img01");
                var captionText = document.getElementById("caption");
                img.onclick = function(){
                  modal.style.display = "block";
                  modalImg.src = this.src;
                  captionText.innerHTML = this.alt;
                }

                // Get the  element that closes the modal
                var span = document.getElementsByClassName("close")[0];

                // When the user clicks on  (x), close the modal
                span.onclick = function() {
                  modal.style.display = "none";
                }

                

<h2>Image Modal</h2>

<p>در این مثال ، ما از CSS برای ایجاد یک حالت (جعبه گفتگو) استفاده می کنیم که به طور پیش فرض پنهان است.</p>

<p>ما از JavaScript برای فعال کردن Modal استفاده می کنیم و وقتی روی آن کلیک می کنیم تصویر فعلی را در داخل نمایش می دهیم. همچنین توجه داشته باشید که ما از ویژگی "alt" تصویر به عنوان متن زیرنویس تصویر در داخل Modal استفاده می کنیم.</p>

<img id="myImg" src="http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->

<div id="myModal" class="modal">

  <span class="close">&times;</span>

  <img class="modal-content" id="img01">

  <div id="caption"></div>

</div>

<script>

// Get the modal

var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption

var img = document.getElementById("myImg");

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){

  modal.style.display = "block";

  modalImg.src = this.src;

  captionText.innerHTML = this.alt;

}

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal

span.onclick = function() { 

  modal.style.display = "none";

}

</script>


 

خروجی Modal Image