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: | 117 / 113 |
| Version history: | 5 change(s) |
| Referenced in: | [show references] |