We Keep Coding

Search filter on div with hidden elements

I have a accordion placed inside a div and I have added a search box to the div which is intended to function as a search filter. Inside the div some accordion elements are visible and some are hidden. I need the filter to work only on visible elements.
In the current code I have used it's searching for all elements inside the div and when the search box is cleared the page is getting hanged and not responsive unless I refresh the page.
Any solution pointing to the right direction would be highly appreciated.
$(document).ready(function() {
$("#searchTC").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#testcases div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">Test<i class="fa fa-thumbs-o-down"></i> <small style="color:#117DEF">CASES</small></h4>
<div class="panel-actions">
<!--Search TestCases-->
<div id="filterTC" class="form-group">
<div class="input-search">
<i class="input-search-icon ti-search" aria-hidden="true" style="color: #1179EF"></i>
<input type="search" class="form-control" placeholder="Search..." id="searchTC">
</div>
</div>
<!--Select All/Deselect All Toggle-->
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)" style="transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, border-color 0s linear 0.17s, -webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body container-fluid">
<div id="testcases" class="accordion js-accordion" style="max-height: 240px;overflow: auto;">
<div class="accordion__item js-accordion-item" id="0001" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_SearchProducts" aria-hidden="true" style="display: none;"><label for="labelauty-0001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_SearchProducts</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-0001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-00010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Ebay</button>
<div class="modal fade modal-fill-in" id="dtFillIn-00010" aria-hidden="false" aria-labelledby="dtFillIn-00010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Ebay</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Ebay"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item active"></div>
<div class="accordion__item js-accordion-item" id="00011" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_LoginToApplication" aria-hidden="true" style="display: none;">
<label for="labelauty-00011"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_LoginToApplication</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-00011"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-000110" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_EbayLogin</button>
<div class="modal fade modal-fill-in" id="dtFillIn-000110" aria-hidden="false" aria-labelledby="dtFillIn-000110" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_EbayLogin</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_EbayLogin"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="1001" style="display: none" name="com.onlineshopping.TS_Amazon">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_ExploreAmazon" aria-hidden="true" style="display: none;"><label for="labelauty-1001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_ExploreAmazon</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-1001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-10010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Amazon</button>
<div class="modal fade modal-fill-in" id="dtFillIn-10010" aria-hidden="false" aria-labelledby="dtFillIn-10010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Amazon</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Amazon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
</div>
<br>
<button type="button" class="btn btn-info float-right waves-effect waves-classic" onclick="loadplan()">Add to Plan</button>
</div>
</div>
</div>

Use jquery hidden attribute to check if element is hidden
if ($('#testElement').is(':visible')) {
// Code
}

Bootstrap's modal content from another page not working, instead renders as new page

Trying to open Bootstrap's modal-content from another page, however it opens as new page instead of modal. Not sure why it is behaving like this.
Here is my code from page1:
<div class="text-center list-details" >
<h4>Time Frame: {{offer.delivery_duration? offer.delivery_duration : 'N/A'}}</h4>
<p> </p>
<a data-toggle="modal" href="brands/{{request.variant.model.brand.id}}/models/{{request.variant.model.id}}/variants/{{request.variant.id}}/requests/{{request.id}}/offers/{{offer.id}}/modal" data-target="#myModal" class="btn btn-success" role="button">View Full Offer</a>
</div>
<div id="myModal" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content" style="border-radius: 0px;">
</div>
</div>
</div>
Here is the page2 which contains modal-content:
<div class="modal-header" style="background-color: #213a4c; color:white;">
<button type="button" class="close" data-dismiss="modal" style="color: #fff;">×</button>
<h4 class="modal-title" style="color: #fff;"><strong>{{brand.name}} {{model.name}} {{variant.name}}</strong></h4>
</div>
<div class="modal-body" style="padding: 0px;">
<div class="col-md-12">
<div class="col-md-12 text-center noside-padding">
<h2>{{brand.name}} {{model.name}} {{variant.name}}</h2>
</div>
<div class="col-md-6 n cardeal-detail">
<!-- first row -->
<div class="col-md-6 noside-padding">
<h5>Ex Showroom Price</h5>
</div>
<div class="col-md-6 noside-padding text-right ng-binding">
{{offer.ex_showroom_price | currency:"₹ "}}
</div>
</div>
</div>
</div>
<div class="modal-footer text-center" >
<button type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 20px;">Close</button>
</div>
Could you please anyone help me on this regard?? how do i get page2 as modal in page1.

What does the code $('body').on('hidden.bs.modal', '.modal', function (){....} do and when does it gets called?

I've following HTML to show the bootstrap modal dialog:
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
Bootstrap modal dialog code is as below :
<div id="myModal-event" class="modal fade" role="dialog">
<!-- <div role="document" class="modal-dialog"> -->
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true"> x </span></button> -->
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body"> Loading... </div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
and another code as follows :
<div class="modal-content">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button> -->
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
{$eventDetails.event_details.title}
<input type="hidden" name="hid_event_id" id="hid_event_id" value="{$eventDetails.event_details.event_id}">
</div>
<ul>
<li><img src="{$user_img_url}/time.png" alt=""> {$eventDetails.event_details.start_time_phrase_stamp}</li>
<li><img src="{$user_img_url}/calender.png" alt=""> {$eventDetails.event_details.start_time_phrase}</li>
{if $eventDetails.event_details.location}
<li>
<img src="{$user_img_url}/location.png" alt="">
{$eventDetails.event_details.location}
</li>
{/if}
{if $eventDetails.event_details.group_name}
<li><img src="{$user_img_url}/group_event.png" alt="">Group: {$eventDetails.event_details.group_name}</li>
{/if}
<li><button type="button" class="btn btn-info" data-toggle="popover">Edit Event</button></li>
</ul>
<ul id="popover-content" class="list-group" style="display: none">
<a data-toggle="modal" href="ajax_event_detail.php?event_id={$eventDetails.event_details.event_id}" data-target="#myModal-edit-event" style="cursor: pointer;" class="list-group-item">Edit Event</a>
Invite Members
Delete Event
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;" >
<option value="0">I am..</option>
<option value="1" {if $myEventGoingStatus eq 'attending_user'} selected="selected" {/if} >Going</option>
<option value="2" {if $myEventGoingStatus eq 'mayBeAttending_user'} selected="selected" {/if} >Maybe</option>
<option value="3" {if $myEventGoingStatus eq 'notComing_user'} selected="selected" {/if}>Not Going</option>
</select>
</div>
<!--
<div class="form-group" align="right">
<select name="event_actions" id="event_actions" class="form-control" style="width:150px;">
<option value=""></option>
<option value="edit_event">Edit Event</option>
<option value="invite_members">Invite members</option>
<option value="delete_event">Delete event</option>
</select>
</div>
-->
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li>Description</li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li>Not Going</li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane active" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{$eventDetails.event_details.description}
</div>
</div>
</div>
<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>
<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.attending_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.mayBeAttending_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
<div class="tab-pane" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.notComing_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
Now what's happening in my code is when user clicks on above
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
The first part of code opens up, then the data fetch is going on then suddenly the second part of code i.e. the data fetched gets added to the modal. I'm not understanding how this is happening.
The jQuery which is doing this is as follows but I didn't understand what it is doing when that hide event is being called etc. etc. Please clear my doubts by making me understand below code.
$('body').on('hidden.bs.modal', '.modal', function () {
console.log('Hi *');
$("#myModal-event .modal-body").html(' Loading... ');
$(this).removeData('bs.modal');
});
Thanks.

This executes when the .modal (modal window) gets closed. So, whenever you open a modal window with the class modal (obviously), at some point it gets closed. When that modal window gets hidden (or closed) the event hidden.bs.modal gets triggered and the function gets executed.
This is not managed by the user (you didn't write explicit code) but the Bootstrap library has it built in.
From the Bootstrap Documentation:
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
Sample Code:
$('#myModal').on('hidden.bs.modal', function (e) {
// do something when this modal window is closed...
});
To answer the queries in the comments, you have:
$("#myModal-event .modal-body").html(' Loading... '); sets the content of the modal window to be Loading....
$(this).removeData('bs.modal'); - This tells Bootstrap to clear everything on the close of the modal window, so you won't get cached content. See more at Clear Bootstrap Modal content after close.

Changing picture position in a modal (bootstrap 3)

I have an example modal here:
<!-- Large Modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">funnycatnumberone</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-8 col-md-8">
<img src="cat1.JPG" class="img-responsive">
</div>
<div class="col-lg-4 col-md-4">
<p>brief description about my cat</p>
<ul class="list-unstyled">
<li>it has four legs</li>
<li>also a tail</li>
<li>likes boxes</li>
</ul>
</div>
<br>
</div>
<br>
<div class="row">
<div class="col-sm-2">
<img src="cat2.JPG" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="cat3.JPG" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="cat4.JPG" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="cat5.JPG" class="img-responsive">
</div>
</div>
</div>
<div class="modal-footer">
<a type="button" class="btn whateverclassimade" href="cutecatsmkay.php">check out some cats, yo</a>
<a type="button" class="btn whateverclassimade" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
When the modal opens, there is a title, a large picture (located on the left under the title), a brief description with some lines for added details, four pictures that are basically thumbnails directly under the main image, and some buttons to close the model or redirect the user to a different page.
Here's my question of sorts:
When a thumbnail (under the main image) is selected, I'd like that image to take the place of the larger image (aka take the main image stage). I appreciate the help!

try this:
$("#thumbnail1").click(function(){
$("#main_image").attr("scr", "source of image");
});
use id's corresponding to appropriate tag

Simple Pure Javascript would be
function imageSwap(catID) {
document.getElementById("largeCat").src = document.getElementById(catID).src;
};
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">funnycatnumberone</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-8 col-md-8">
<img id="largeCat" src="http://placekitten.com/g/500/600" class="img-responsive">
</div>
<div class="col-lg-4 col-md-4">
<p>brief description about my cat</p>
<ul class="list-unstyled">
<li>it has four legs</li>
<li>also a tail</li>
<li>likes boxes</li>
</ul>
</div>
<br>
</div>
<br>
<div class="row">
<div class="col-sm-2" onclick="imageSwap('smallCat1');">
<img id="smallCat1" src="http://placekitten.com/g/500/300" class="img-responsive">
</div>
<div class="col-sm-2" onclick="imageSwap('smallCat2');">
<img id="smallCat2" src="http://placekitten.com/g/500/400" class="img-responsive">
</div>
<div class="col-sm-2" onclick="imageSwap('smallCat3');">
<img id="smallCat3" src="http://placekitten.com/g/500/500" class="img-responsive">
</div>
<div class="col-sm-2" onclick="imageSwap('smallCat4');">
<img id="smallCat4" src="http://placekitten.com/g/500/600" class="img-responsive">
</div>
</div>
</div>
<div class="modal-footer">
<a type="button" class="btn whateverclassimade" href="cutecatsmkay.php">check out some cats, yo</a>
<a type="button" class="btn whateverclassimade" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>

File uploading popup window

I need help for my uploading system.
I use that purple button, http://tympanus.net/Development/CreativeButtons/ ( Scroll down when you see purple buttons ).
And i use that wide, short content popup, http://codepen.io/ksondere/pen/tAIrl ( Here is JS code and HTML and CSS source codes ).
<form id="fileupload" action="<?php echo site_url( $user->userURL.'/upload' ) ?>" method="POST" enctype="multipart/form-data">
<div id="wrap">
<div id="main">
<div id="droparea">
<div class="empty-folder-contents density-tiny">
<div class="empty-folder-circle"></div>
<div class="drop-file-icon drive-sprite-aux-image-gray"></div>
<div class="drop-target-contents-text drop-target-contents-inactive">
<div class="fileinner">
<img class="file" src="img/icon/file.png" />
<p>
<label for="upload" class="btn btn-5 btn-5b icon-plus">Lisa fail</label>
<input style="opacity:0" type="file" name="files[]" id="upload" multiple>
</p>
<div class="drop-target-contents-main-title">või</br></br>lohistage failid siia!</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="shortModal" class="modal modal-wide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Failide üleslaadimine</h4>
</div>
<div class="progress progress-danger progress-striped active">
<div class="bar" style="width:0%;"></div>
</div>
<div class="progress-extended"> </div>
</div>
<div class="fileupload-loading"></div>
<br>
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</div>
</div>
</form>
</div>
<script style="display: none;">var __links = document.querySelectorAll('label');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
// when .modal-wide opened, set content-body height based on browser height; 200 is appx height of modal padding, modal title and button bar
$(".modal-wide").on("show.bs.modal", function() {
var height = $(window).height() - 200;
$(this).find(".modal-body").css("max-height", height);
});
</script>
<?php endif; ?>
I need if i click to that purple button, then its coming automatically popup where is upload progress bars and file names.
Kind regards,
KLDesigns,

Not sure, here is the code once you're using bootstrap >> http://jsfiddle.net/Y5x4d/
<!-- Button trigger modal -->
<button class="btn btn-5 btn-5a icon-cog" data-toggle="modal" data-target="#myModal"><span>lauch Modal</span></button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Its working in your jsfiddle..
But I need to choose first files when i press choose then its opening popup window.