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.
Related
I'm using a Bootstrap Modal and the modal-footer div is displayed with the grey background used to block out the main page instead of the white background used by the rest of the modal.
It's a somewhat complicated set up but I'll do my best to explain it.
The modal definition looks like this:
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<div class="modal-dialog" role="document">
<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 id="concert-modal-title" class="modal-title"></h4>
</div>
<div id="concert-modal-body" class="modal-body">
</div>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
You'll see that the modal-body section is empty. That's because I have javascript that uses the Mustache.js templating system to set the html of the body using a template and the return from an Ajax call. That all works correctly and the modal body is displayed correctly.
The modal body consist of a Bootstrap tab control and a form that contains all the tab panes, so the overall structure looks like this.
<ul class="nav nav-tabs nav-justified nav-justify">
<li class="active">Basic </li>
<li>Media </li>
<li>Tickets </li>
</ul>
<form id="concert-form" action="#" class="form-horizontal">
<div class="hidden">
<input type="text" name="Mode" id="Mode">
<input type="text" name="ConcertID" value="{{ConcertID}}">
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
</form>
I've used an html syntax checker to make sure I don't have any unclosed tags. I've also tried placing the form tag in several different places in the code but no matter what I do, the modal-footer section does not display correctly.
Any ideas?
You have your footer outside the modal-content div.
Structure should go:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
You have it as this (your missing a div in the html you posted btw):
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
</div>
<div class="modal-footer"></div>
</div>
</div> <!--missing div in the example you posted here-->
Functioning code below so you can see the correct structure in action:
$(document).ready(function(){
$('#concert-modal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<div class="modal-dialog" role="document">
<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 id="concert-modal-title" class="modal-title">Mark it Pete</h4>
</div>
<div id="concert-modal-body" class="modal-body">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ec/f3/fe/ecf3fedfa44312bb0fe6bcb953c8718f.gif" style="max-height: 50px;"/>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
</div>
</div>
I have a dialog box which should appear whenever I click on a checkbox. But it should not disappear when clicking outside or pressing escape. so I used backdrop='static' , keyboard='false' in my jquery.
but then this dialog box is appearing whenever I load or refresh the page.
$('#storeStatusDialog').modal({
backdrop: 'static',
keyboard: false
})
<div class="container">
<div class="modal fade" id="storeStatusDialog" role="dialog" >
<div class="modal-dialog armanlast">
<div class="modal-content">
<div class="modal-header">
<div class="close-icon-wrap">
<a class="modal-close-icon" href="#" data-dismiss="modal">×</a>
</div>
</div>
<div class="modal-body">
<h1 class="modal-title1">Deactivate Store</h1>
<p class="deactivate-p"></p>
</div>
<div class="modal-footer">
<button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button>
<button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span></button>
</div>
</div>
</div>
</div>
</div>
Please tell me a way to prevent dialog box appearing when page gets loaded.
thank you so much.
HTML:
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#storeStatusDialog">
Launch
</button>
<div class="modal fade" id="storeStatusDialog" role="dialog">
<div class="modal-dialog armanlast">
<div class="modal-content">
<div class="modal-header">
<div class="close-icon-wrap">
<a class="modal-close-icon" href="#" data-dismiss="modal">×</a>
</div>
</div>
<div class="modal-body">
<h1 class="modal-title1">Deactivate Store</h1>
<p class="deactivate-p"></p>
</div>
<div class="modal-footer">
<button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button>
<button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span>
</button>
</div>
</div>
</div>
</div>
</div>
Js:
$('#storeStatusDialog').modal({
show: false,
backdrop: 'static',
keyboard: false
})
Snippet:
http://codepen.io/anon/pen/dpEjxK
I have a photo shuffle grid, with this grid I can select a few theme's and it shows only the pictures of that theme.
Now I want to do the following, when I click on a image I want a modal to open. The problem I have is the following:
The first image (with a modal in the back) opens without problems, but the other pictures (with modals) do not open probably, I see them (half) but I can't click on them.
This is my code:
HTML
<ul class="portfolio-sorting list-inline text-center">
<li>All</li>
<li>Heren</li>
<li>Dames</li>
<li>jongens</li>
<li>meisjes</li>
<li>gemengd</li>
</ul>
<!--end portfolio sorting -->
<ul class="portfolio-items list-unstyled" id="grid">
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren1" data-toggle="modal" data-target="#heren1"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 1</h2>
</button>
<div class="modal fade bs-example-modal-lg" id="heren1" role="dialog" style="display: none;">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title black_tekst">Heren 1</h4>
</div>
<div class="modal-body">
<!--Tekst -->
<h2 class="black_tekst">Test </h2>
<p class="black_tekst">
<br>
<br> Team informatie
<br>
<br>
</p>
<h3 class="black_tekst">Test</h3>
<!--Einde tekst -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------->
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren2" data-toggle="modal" data-target="#heren2"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 2</h2>
</button>
<div class="modal fade" id="heren2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------------->
<!-- sizer -->
<li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer"></li>
</ul>
<!--end portfolio grid -->
CSS and JS you can find on https://jsfiddle.net/hrpj3j9t/2/
1) Bad code provided on jsfiddle - unclear, modernizr in js code section
2)From my point of view the best way is to generate code you need with jquery. In imageSrc I mean the real path to image.
This the small example of concept:
Place modal at the top:
<body>
<div class="modal" id="modal">
<img id="modalImage" src = "" alt="image">
...
</div>
...
<div class="elementOfGrid" data-image="imageSrc">
</body>
in js:
$('elementOfGrid').click(function(){
$('#modal #modalImage').attr({"src":$(this).data("image")});
$('#modal').modal("show");
}
another variant instead of setting attribute you can generate the whole html and use it like this:
$('#modal').html('');
var htmlRow = '<div class="modalImage"><img src="imageSrc"></div>';
$('#modal').html(htmlRow);
I have this view with a modal window. When I click to open the modal window, I'd like to pass the parameter item.InstrumentId into the modal window so that I can click on a link that redirects me to the page from that specific instrument that belongs to the InstrumentId. What I'm doing below successfully passes the InstrumentId into the window, but the problem is I don't know how to pass that value into the Html.ActionLink. Any hints as to how I can proceed?
#foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: #item.InstrumentId
</h4>
</div>
<div class="col-md-4">
#item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id="#item.InstrumentId">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
var modalId = $(this).data('id');
$(".modal-dialog #myModal").val(modalId);
})
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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="myModal"></h4>
</div>
<div class="modal-body">
#item.Message
<br/> <br/> <br/>
<div class="row">
<div class="col-md-4">
Slide: 1234500323
</div>
<div class="col-md-4">
Instrument: #Html.ActionLink(item.InstrumentId, "Instrument", new {instrumentid = item.InstrumentId})
</div>
<div class="col-md-4">
Checked: #item.Checked
</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>
</div>
</div>
</li>
}
UPDATE
<div>
<ul class="list-group">
#foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: #item.InstrumentId
</h4>
</div>
<div class="col-md-4">
#item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-url="#Url.Action("Instrument", new {instrumentid = #item.InstrumentId})">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
});
</script>
</div>
</div>
</li>
}
</ul>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">
#*#item.Message*#
<br /> <br /> <br />
<div class="row">
<div class="col-md-4">
Slide: 1234500323
</div>
<div class="col-md-4">
Instrument: <a id="details" href="#">Details</a>
</div>
<div class="col-md-4">
Checked: #*#item.Checked*#
</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>
You currently generating a modal for each item in your collection but giving it an id="myModal" which is invalid html and means data-target="#myModal" will only ever open the first one. Move the modal outside the loop so your create only one (and also remove the <h4 class="modal-title" id="myModal"></h4> element which also has the same id attribute)
Then change the button html to
<button type="button" class=".." .. data-url="#Url.Action("Instrument", new { instrumentid = item.InstrumentId })">
and change the html in the modal to
Instrument: <a id="details" href="#">Details</a>
Then change the script to
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
})
Side note: You will probably want to do something similar with Checked: #item.Checked in the modal
1.Use ID for Anchor Link.
2.Notice this line <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a> in code. It has Anchor Link Value=. When you open modal you can see Anchor Link Value=10320320 and you can inspect href too.
$('#myModal1').on('show.bs.modal', function(e) {
var modalId = $(e.relatedTarget).data('id');
$('#InstrumentIDLink').attr('href', 'url+'+ modalId)
$('#InstrumentIDLink').text('Anchor Link Value='+ modalId);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div> <a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320320'>Launch Modal (10320320)</a><br/>
<a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320321'>Launch Modal (10320321)</a>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"> <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
From bootstrap 3+ you can use e.relatedTarget to get element that triggered the modal
Instrument:
#Html.ActionLink("Link_Text", "Action_Name", "Controller_Name", new { id=item.InstrumentId})
Now in your COntroller you can access this value like
public ActionResult Action_Name(int id)
{
//Do something
return view();
}
I am using bootstreap3 popup(model) to select image from computer.
I want when user select one or more image then popup should be closed and image uploading preview should be display in main page (below the <i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>).
My code is
<div class="form-group">
<div class="controls form-inline">
<i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>
<div id="myModal" class="modal 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>Upload Images</h4>
</div>
<div class="modal-body">
<div class="modal-title">
</div>
<div id='content' class="tab-content">
<div class="tab-pane active" id="uplod">
<h1>Drag and Drop files using Dropzone.js</h1>
<form action="upload.php"
class="dropzone"
id="my-awesome-dropzone"></form>
</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>
</div>
</div>
My code is here .
How to do this
document.getElementById("imageid").src="../template/save.png";