"modal popup inside"
Bootstrap 3.3.0 Snippet by devlopereswar

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <div class="form-group"> <label class="col-md-4 control-label" for="product_id">Enable Product</label> <div class="col-md-4"> <label class="label-switch switch-primary"> <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked"> <span class="lable"></span></label> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="product_id"> Attribute Set </label> <div class="col-md-4"> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="product_name">PRODUCT NAME</label> <div class="col-md-4"> <input id="product_name" name="product_name" placeholder="PRODUCT NAME" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="sku"> SKU</label> <div class="col-md-4"> <input id="sku" name="sku" class="form-control input-md" required="" type="text"/> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Price"> Price</label> <div class="col-md-4"> <input id="price" name="price" placeholder="$" class="form-control input-md" required="" type="text"/> <a href="#"> Advance Pricing</a> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="sku"> Tax Class</label> <div class="col-md-4"> <input id="tax" name="tax" class="form-control input-md" required="" type="text"/> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="sku"> Quantity</label> <div class="col-md-4"> <input id="qty" name="qty" class="form-control input-md" required="" type="number"/> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Stock Status"> Stock Status </label> <div class="col-md-4"> <select class="form-control" id="stock_status"> <option>In Stock</option> <option>Out of Stock</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Categories"> Categories </label> <div class="col-md-4"> <select class="form-control" id="Categories"> <option>List</option> <option>Clist</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="product_weight">PRODUCT WEIGHT</label> <div class="col-md-4"> <input id="product_weight" name="product_weight" placeholder="PRODUCT WEIGHT" class="form-control input-md" required="" type="text"> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="product_description">PRODUCT DESCRIPTION</label> <div class="col-md-4"> <textarea class="form-control" id="product_description" name="product_description"></textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="product_name_fr">PRODUCT DESCRIPTION FR</label> <div class="col-md-4"> <textarea class="form-control" id="product_name_fr" name="product_name_fr"></textarea> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="percentage_discount">PERCENTAGE DISCOUNT</label> <div class="col-md-4"> <input id="percentage_discount" name="percentage_discount" placeholder="PERCENTAGE DISCOUNT" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="approuved_by">APPROUVED BY</label> <div class="col-md-4"> <input id="approuved_by" name="approuved_by" placeholder="APPROUVED BY" class="form-control input-md" required="" type="text"> </div> </div> </form>
.switch{ opacity: 0; position: absolute; z-index: 1; width: 18px; height: 18px; cursor: pointer; } .switch + .lable{ position: relative; display: inline-block; margin: 0; line-height: 20px; min-height: 18px; min-width: 18px; font-weight: normal; cursor: pointer; } .switch + .lable::before{ cursor: pointer; font-family: fontAwesome; font-weight: normal; font-size: 12px; color: #32a3ce; content: "\a0"; background-color: #FAFAFA; border: 1px solid #c8c8c8; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 0; display: inline-block; text-align: center; height: 16px; line-height: 14px; min-width: 16px; margin-right: 1px; position: relative; top: -1px; } .switch:checked + .lable::before { display: inline-block; content: '\f00c'; background-color: #F5F8FC; border-color: #adb8c0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); } /* CSS3 on/off switches */ .switch + .lable { margin: 0 4px; min-height: 24px; } .switch + .lable::before { font-weight: normal; font-size: 11px; line-height: 17px; height: 20px; overflow: hidden; border-radius: 12px; background-color: #F5F5F5; -webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15); border: 1px solid #CCC; text-align: left; float: left; padding: 0; width: 52px; text-indent: -21px; margin-right: 0; -webkit-transition: text-indent .3s ease; -o-transition: text-indent .3s ease; transition: text-indent .3s ease; top: auto; } .switch.switch-bootstrap + .lable::before { font-family: FontAwesome; content: "\f00d"; box-shadow: none; border-width: 0; font-size: 16px; background-color: #a9a9a9; color: #F2F2F2; width: 52px; height: 22px; line-height: 21px; text-indent: 32px; -webkit-transition: background 0.1s ease; -o-transition: background 0.1s ease; transition: background 0.1s ease; } .switch.switch-bootstrap + .lable::after { content: ''; position: absolute; top: 2px; left: 3px; border-radius: 12px; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); width: 18px; height: 18px; text-align: center; background-color: #F2F2F2; border: 4px solid #F2F2F2; -webkit-transition: left 0.2s ease; -o-transition: left 0.2s ease; transition: left 0.2s ease; } .switch.switch-bootstrap:checked + .lable::before { content: "\f00c"; text-indent: 6px; color: #FFF; border-color: #b7d3e5; } .switch-primary >.switch.switch-bootstrap:checked + .lable::before { background-color: #337ab7; } .switch.switch-bootstrap:checked + .lable::after { left: 32px; background-color: #FFF; border: 4px solid #FFF; text-shadow: 0 -1px 0 rgba(0, 200, 0, 0.25); }
$(function(){ // here the code for text minimiser and maxmiser by faisal khan var minimized_elements = $('p.text-viewer'); minimized_elements.each(function(){ var t = $(this).text(); if(t.length < 500) return; $(this).html( t.slice(0,500)+'<span>... </span><a href="#" class="more btn btn-sm btn-primary"> Read More.. </a>'+ '<span style="display:none;">'+ t.slice(500,t.length)+' <a href="#" class="less btn btn-sm btn-danger"> close </a></span>' ); }); $('a.more', minimized_elements).click(function(event){ event.preventDefault(); $(this).hide().prev().hide(); $(this).next().show(); }); $('a.less', minimized_elements).click(function(event){ event.preventDefault(); $(this).parent().hide().prev().show().prev().show(); }); });

Related: See More


Questions / Comments: