0
我正在调色板项目上工作，在改变不同主题时挣扎。选择时替换div内容
初始页面将有暖调色板，但我想点击所有主题后改变这一点。
用户可以选择不同的主题，如果你点击下拉菜单就像我张贴的图像。
下面你会发现我想象的图像。
* {
box-sizing:border-box;
}
body {
margin:0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position:absolute;
top:0;
left:0;
width:75px;
height:75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition:all 0.3s;
transform:translateX(0);
z-index:1;
}
[data-page='0'] .board-nav-indicator {
transform:translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform:translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform:translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position:relative;
z-index:2;
}
.board-pages {
position:absolute;
top:75px;
left:0;
width:100%;
height:calc(100% - 75px);
overflow:hidden;
}
.board-page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:all 0.4s;
transform:translateX(0);
overflow:auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex:0 1 25%;
padding:6px;
}
.grid-item-theme {
flex:0 1 25%;
padding:6px;
}
.grid-row {
overflow-x:auto;
white-space:nowrap;
}
.grid-row .grid-item {
display:inline-block;
max-width:110px;
}
.grid-item-content {
text-align:left;
font-family: "mr-eaves-modern";
font-size:0.3rem;
text-transform:uppercase;
}
.pick-palette img{
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
/* The Modal (background) */
.modal-inside {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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.5); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content-theme {
background-color: #fff;
margin: 10% auto; /* 15% from the top and centered */
padding: 20px;
border-radius:4px 4px 4px 4px;
width: 70%;
height: 430px;
}
/* The Close Button */
.close-theme {
color: #000000;
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
font-size: 28px;
font-weight: bold;
}
.close-theme:hover,
.close-theme:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.theme-list-dropdown {
color: #BDBEC1;
text-transform: uppercase;
font-family: "mr-eaves-modern";
font-size: 0.9rem;
text-align: center;
}
.theme-list-name {
padding: 20.5px;
}
#all-theme-list-name {
margin-top: -5px;
}
#warm-theme-list-name {
color: #262931;
/* background-color: #EEEEEF;*/
}<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu"><div id="themeBtn" class="theme-warm">Warm</div><i class="material-icons">keyboard_arrow_down</i></div>
<!-- The Modal -->
<div id="myModal" class="modal-inside">
<span class="close-theme">×</span>
<div class="modal-content-theme">
<div class="theme-list-dropdown">
<div class="theme-list-name" id="all-theme-list-name">All</div>
<div class="theme-list-name" id="">Bright</div>
<div class="theme-list-name">Dark</div>
<div class="theme-list-name" id="warm-theme-list-name">Warm</div>
<div class="theme-list-name">Cool</div>
<div class="theme-list-name">Pastel</div>
<div class="theme-list-name">Neon</div>
</div>
</div>
</div>
<!-- End: The Modal -->
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<!-- <i class="material-icons more-icon">more_horiz</i> -->
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script>
$(".board-pages .grid-item").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
});
$(".board-pages .grid-item-pattern-board").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
});
</script>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
// var btn = document.getElementById("themeBtn");
var btn = document.getElementById("themeBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-theme")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
