css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
    <header>
        <h3>hello in modal box tutorial</h3>
    </header>
    <div class="container">
        <div class="thumbnail-product">
            <div class="thumb-img">
                <img src="data:image/png;base64,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"/>
            </div>
            <div class="thumb-btn">
                <button class="btn-show-modal">show modal</button>
            </div>
            <div class="container-modal-box">
                <div class="modal-box">
                   <p class="btn-close-modal">x</p>
                    <h3 class="modal-title">Javascritp & Jquery</h3>
                    <div class="modal-row">
                        <div class="book-img">
                            <img src=""/>
                        </div>
                        <div class="book-description-price">
                            <div class="book-description">
                                <p>
                                    this is a good book to learn javascript scripting language from
                                    scratch, i idvice you to learn it
                                </p>
                            </div>
                            <div class="book-price-btn-buy">
                                <strong class="book-price">20$</strong>
                                <a class="buy-book" href="#">buy now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="thumbnail-product">
            <div class="thumb-img">
                <img src="data:image/jpeg;base64,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"/>
            </div>
            <div class="thumb-btn">
                <button class="btn-show-modal">show modal</button>
            </div>
            <div class="container-modal-box">
                <div class="modal-box">
                    <p class="btn-close-modal">x</p>
                    <h3 class="modal-title">Javascritp & Jquery</h3>
                    <div class="modal-row">
                        <div class="book-img">
                            <img src=""/>
                        </div>
                        <div class="book-description-price">
                            <div class="book-description">
                                <p>
                                    this is a good book to learn javascript scripting language from
                                    scratch, i idvice you to learn it
                                </p>
                            </div>
                            <div class="book-price-btn-buy">
                                <strong class="book-price">20$</strong>
                                <a class="buy-book" href="#">buy now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="thumbnail-product">
            <div class="thumb-img">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnsayoEReJ38AAeyZSh_9wMYspoTNNAv1fwJZhDCoqqPStOvkZAQ"/>
            </div>
            <div class="thumb-btn">
                <button class="btn-show-modal">show modal</button>
            </div>
            <div class="container-modal-box">
                <div class="modal-box">
                    <p class="btn-close-modal">x</p>
                    <h3 class="modal-title">Javascritp & Jquery</h3>
                    <div class="modal-row">
                        <div class="book-img">
                            <img src=""/>
                        </div>
                        <div class="book-description-price">
                            <div class="book-description">
                                <p>
                                    this is a good book to learn javascript scripting language from
                                    scratch, i idvice you to learn it
                                </p>
                            </div>
                            <div class="book-price-btn-buy">
                                <strong class="book-price">20$</strong>
                                <a class="buy-book" href="#">buy now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="thumbnail-product">
            <div class="thumb-img">
                <img src="data:image/jpeg;base64,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"/>
            </div>
            <div class="thumb-btn">
                <button class="btn-show-modal">show modal</button>
            </div>
            <div class="container-modal-box">
                <div class="modal-box">
                    <p class="btn-close-modal">x</p>
                    <h3 class="modal-title">Javascritp & Jquery</h3>
                    <div class="modal-row">
                        <div class="book-img">
                            <img src=""/>
                        </div>
                        <div class="book-description-price">
                            <div class="book-description">
                                <p>
                                    this is a good book to learn javascript scripting language from
                                    scratch, i idvice you to learn it
                                </p>
                            </div>
                            <div class="book-price-btn-buy">
                                <strong class="book-price">20$</strong>
                                <a class="buy-book" href="#">buy now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
            
          
!
            
              body{
    padding:0px;
    margin:0px;
    font-family: 'Roboto Condensed', sans-serif;
    overflow-x: hidden;
    position: relative;
    min-height:1000px;
}

header{
    background-color:black;
    color:white;
    padding:15px;
    width:100%;
    height:auto;
    text-align:center;
}
header h3{
    width:90%;
    word-break: keep-all;
    margin:auto;
}
.container{
    width:90%;
    margin:20px auto;
    background-color:#ddd;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 10px;
    padding:10px;
    margin-bottom:0px;
}
.thumbnail-product{
    padding:10px;
    background-color:white;
}
.thumb-img{
    width:100%;
    height:250px;
    margin-bottom:20px;
}
.thumb-img img{
    width:100%;
    height:100%;
}
.btn-show-modal{
    border:none;
    padding:10px;
    background-color: #62a6ff;
    color:white;
    cursor: pointer;
}
.container-modal-box{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    height:100%;
    width:100%;
    background-color:rgba(0, 0, 0, .80);
    margin:auto;
    display:none;
}

.modal-box{
    background-color:white;
    height:auto;
    padding:15px;
    width:70%;
    margin:100px auto;
    border-radius: 4px;
}

.btn-close-modal{
    float:right;
    color:#cecece;
    font-size:28px;
    margin:0px;
    cursor:pointer;
}
.btn-close-modal:hover{
    color:black;
}
.modal-row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding:10px;
    grid-gap:10px;
    justify-items:center;
}
.modal-title{
    text-align:center;
    padding:10px;
}
.book-img{
    height:300px;
    padding:5px;
}
.book-img img{
    width:80%;
    height:100%;
}

.book-description p{
    color: #9e9e9e;
    padding:10px;
}
.book-price{
    display: block;
    font-size:18px;
    margin-bottom:10px;
}
.buy-book{
    display:block;
    background-color:black;
    color:white;
    text-decoration:none;
    padding:10px;
    margin:auto;
    width:50%;
    text-align:center;
}

@media (max-width: 650px) {
    .container{
        grid-template-columns: repeat(3, 1fr);
    }
    .modal-box{
        width:80%;
    }
}
@media (max-width: 550px) {
    .container{
        grid-template-columns: repeat(2, 1fr);
    }
    .modal-box{
        width:90%;
    }
    .modal-row{
        grid-template-columns: repeat(1, 1fr);
    }
}
            
          
!
            
              //function to show th modal and hide it
(function () {
    var showBtn = document.querySelectorAll(".btn-show-modal");
    showBtn.forEach(function (item) {
       item.addEventListener("click", function () {
           var modalBox = this.parentElement.parentElement.querySelector(".container-modal-box");
           var modalImg = modalBox.querySelector(".book-img img");
           modalImg.src = this.parentElement.parentElement.querySelector(".thumb-img img").src;
           fadeIn(modalBox, 30);
           var closeBtn = modalBox.querySelector(".btn-close-modal");
           closeBtn.addEventListener("click", function () {
               fadeOut(modalBox, 50);
           });
       });
    });

})();
//ffade in function
function fadeIn(element, time) {
    var fadingFrom = 0;
    element.style.opacity = 0;
    var fading = setInterval(function () {
        var fade = fadingFrom / time;
        element.style.display = "block";
        element.style.opacity = fade;
        fadingFrom++;
        if (fadingFrom == time) {
            element.style.opacity = 1;
            clearInterval(fading);
            fadingFrom = 0;
            return false;
        }
    }, time);
}

//fade out function
function fadeOut(element, time) {
    var fadingFrom = 10;
    var fading = setInterval(function () {
        var fade = fadingFrom / time;
        element.style.opacity = fade;
        fadingFrom--;
        if (fadingFrom == 0) {
            element.style.opacity = 0;
            element.style.display = "none";
            clearInterval(fading);
            fadingFrom = 10;
            return false;
        }
    }, time);
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console