<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
<link rel="stylesheet" type="text/css" href="https://botcompany.de/serve/1032530?ct=text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<title>Window design</title>
<style>
.modal-frame-ui {
background: url(https://botcompany.de/images/1103028) no-repeat;
min-height: 100vh;
background-size: cover;
background-position: center;
}
</style>
</head>
<body style="background-color: blue">
<section class="modal-frame-ui">
<!-- Window Modal -->
<div class="modal fade windowModal animate__animated animate__bounce" id="modal-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-header-btns">
<button type="button" class="btn close red" data-dismiss="modal"></button>
<button class="btn close modalMinimize yellow"></button>
<button class="btn close modalMinimize green"></button>
</div>
<h4 class="modal-title">Frame Title</h4>
<div class="modal-btns-right">
<i class="fa fa-ellipsis-h"></i>
</div>
</div>
<div class="modal-body">
<h4 class="body-title">
Some Frame Title
</h4>
<p class="body-desc">The content of the modal appears here</p>
</div>
</div>
</div>
</section>
<!-- JS Files -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var $content, $modal, $apnData, $modalCon;
$content = $(".minimize");
$(".modalMinimize").on("click", function(){
$modalCon = $(this).closest(".windowModal").attr("id");
$apnData = $(this).closest(".windowModal");
$modal = "#" + $modalCon;
$(".modal-backdrop").addClass("display-none");
$($modal).toggleClass("minimize");
if ( $($modal).hasClass("minimize") ){
$(".minmaxCon").append($apnData);
$(this).find("i").toggleClass( 'fa-minus').toggleClass( 'fa-clone');
}
});
$("button[data-dismiss='modal']").click(function(){
$(".windowModal.modal").removeClass('windowModal');
});
});
</script>
</body>
</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: | 142 / 133 |
| Version history: | 5 change(s) |
| Referenced in: | -