"Dynamic panel"
Bootstrap 4.1.1 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="colorpicker"> <div class="all-color-box"> <div class="col col-12-12 background-color"> <input type="text" class="color-code" id="boxheight" value=""> <div class="color-text" >height</div> </div> </div> <div class="all-color-box"> <div class="col col-12-12 background-color"> <input type="text" class="color-code" id="color" value=""> <div class="color-text" >color</div> </div> </div> <div class="all-color-box"> <div class="col col-12-12 background-color"> <input type="text" class="color-code" id="boxwidth" value=""> <div class="color-text">boxwidth</div> </div> </div> <div class="all-color-box"> <div class="col col-12-12 background-color"> <input type="text" class="color-code" id="font_size" value=""> <div class="color-text" >font_size</div> </div> </div> </div> <div class="fotbtn"> <button class="sidebtn" onclick="opensidepanel();">Preview</button> <button class="sidebtn" onclick="closesidepanel();">Close</button> </div> <div class="sidepanel"> <div class="sidebox" id="previewboxheight">height</div> <div class="sidebox" id="precolor">color</div> <div class="sidebox" id="preboxwidth">boxwidth</div> <div class="sidebox" id="previewfontsize">font_size</div> </div>
.fotbtn { max-width:100%; height:100px; float:left; display:block; margin: 100px auto; } .sidebtn { background: grey; color: #fff; padding: 10px; border-radius: 5px; margin: 7px 1px; cursor: pointer; min-width: 80px; float:left; } .background-color { width: 190px; height: 50px; margin:0; padding:0; } .sidepanel { position: absolute; bottom: 0; right: 0; left:0; z-index: 11; background: #585a89; color: #fff; text-align: center; display: none; border: 2px solid #E5E7E9; height: 100px; line-height: 85px; } .sidebox { background: white; color:#262; margin: 6px; float:left; width: calc(100% / 4 - 12px); } .all-color-box { display:inline-block; float:left; }
$("input[type='text'].color-code").focusout(function(){ $(this).parent("div").css("background-color",$(this).val()) var boxheight=$("#boxheight").val(); var color=$("#color").val(); var boxwidth=$("#boxwidth").val(); var fontsize=$("#font_size").val(); $("#boxheight").css("height",boxheight); $("#color").css("color",color); $("#boxwidth").css("width",boxwidth); $("#font_size").css("font-size",fontsize); }); function opensidepanel() { $(".sidepanel").show(); $("input[type='text'].color-code").focusout(function(){ $(this).parent("div").css("background-color",$(this).val()) }); var previewboxheight=$("#boxheight").val(); var color=$("#color").val(); var boxwidth=$("#boxwidth").val(); var fontsize=$("#font_size").val(); $("#previewboxheight").css("height",previewboxheight); $("#precolor").css("color",color); $("#preboxwidth").css("width",boxwidth); $("#previewfontsize").css("font-size",fontsize); } function closesidepanel() { $(".sidepanel").hide(); }

Related: See More


Questions / Comments: