Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

79
LINES

< > BotCompany Repo | #1032531 // husain window design demo

HTML

1  
<!doctype html>
2  
<html lang="en">
3  
    <head>
4  
        <meta charset="utf-8">
5  
        <meta name="viewport" content="width=device-width, initial-scale=1">
6  
7  
        <!-- CSS -->
8  
        <link rel="preconnect" href="https://fonts.googleapis.com">
9  
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10  
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap" rel="stylesheet">
11  
12  
        <link rel="stylesheet" type="text/css" href="https://botcompany.de/serve/1032530?ct=text/css">
13  
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
14  
15  
        <title>Window design</title>
16  
        <style>
17  
        .modal-frame-ui {
18  
    background: url(https://botcompany.de/images/1103028) no-repeat;
19  
    min-height: 100vh;
20  
    background-size: cover;
21  
    background-position: center;
22  
}
23  
        </style>
24  
    </head>
25  
    <body style="background-color: blue">
26  
    <section class="modal-frame-ui">
27  
        <!-- Window Modal -->
28  
        <div class="modal fade windowModal animate__animated animate__bounce" id="modal-1" role="dialog">
29  
            <div class="modal-dialog">
30  
              <div class="modal-content">
31  
                <div class="modal-header">
32  
                    <div class="modal-header-btns">
33  
                        <button type="button" class="btn close red" data-dismiss="modal"></button>   
34  
                        <button class="btn close modalMinimize yellow"></button> 
35  
                        <button class="btn close modalMinimize green"></button> 
36  
                    </div>
37  
                    <h4 class="modal-title">Frame Title</h4>
38  
                    <div class="modal-btns-right">
39  
                        <i class="fa fa-ellipsis-h"></i>
40  
                    </div>
41  
                </div>
42  
43  
                <div class="modal-body">
44  
                    <h4 class="body-title">
45  
                        Some Frame Title
46  
                    </h4>
47  
                    <p class="body-desc">The content of the modal appears here</p>
48  
                </div>
49  
            </div>      
50  
        </div>
51  
    </section>
52  
53  
54  
    <!-- JS Files -->
55  
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
56  
57  
    <script type="text/javascript">
58  
        $(document).ready(function(){ 
59  
            var $content, $modal, $apnData, $modalCon; 
60  
            $content = $(".minimize");   
61  
            $(".modalMinimize").on("click", function(){
62  
                $modalCon = $(this).closest(".windowModal").attr("id");  
63  
                $apnData = $(this).closest(".windowModal");
64  
                $modal = "#" + $modalCon;
65  
                $(".modal-backdrop").addClass("display-none");   
66  
                $($modal).toggleClass("minimize");  
67  
                if ( $($modal).hasClass("minimize") ){ 
68  
                    $(".minmaxCon").append($apnData);  
69  
                    $(this).find("i").toggleClass( 'fa-minus').toggleClass( 'fa-clone');
70  
71  
                }
72  
            });
73  
            $("button[data-dismiss='modal']").click(function(){   
74  
                $(".windowModal.modal").removeClass('windowModal');
75  
            });
76  
        });
77  
    </script>
78  
    </body>
79  
</html>

download  render html  show line numbers   

Travelled to 3 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx

No comments. add comment

Snippet ID: #1032531
Snippet name: husain window design demo
Eternal ID of this version: #1032531/6
Text MD5: d4af8ab51727ba7bc5c76fbba848f109
Author: stefan
Category: html
Type: HTML
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2021-09-18 16:23:37
Source code size: 3409 bytes / 79 lines
Pitched / IR pitched: No / No
Views / Downloads: 141 / 131
Version history: 5 change(s)
Referenced in: [show references]