I am converting a simple webapp from Bootstrap to Foundation framework. What is the equivalent of
$(...).modal()
?
It's the reveal component:
https://get.foundation/sites/docs/reveal.html
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
$(document).foundation();
Related
I have Problem when trying to make Bootstrap Modals to show PDF Document using <embed src="./pdfFiles.pdf"></embed> Tag. I am using Bootstrap Version 4.5
When user click the button to trigger the modals, Bootstrap modals normally displays PDF document. But, The problem appear when user close the modals and show it again. instead of displaying PDF Document, modals displays blank document.
EDITED
My Code Shown below.
Bootstrap CDN
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<title>PDF Show</title>
Show the modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">PDF Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.13/pdfFile.pdf"></embed>
</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>
I already contained the issue, The PDF Failed to display only when I use the IP address (or base_url() in Codeigniter) to fill pdf link in src="http://192.168.0.1/pdfFile.pdf"
No problem appear when I use http://localhost/pdfFile.pdf
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.1/pdfFile.pdf"></embed>
I am building a livewire-based application which I came to a point where I need wire:click event to fire a function in the livewire component class as well as open a Bootstrap Modal.
Without the wire:click event, the Bootstrap Modal opens.
Without the Bootstrap Modal id, the wire:click event works just fine.
With both the two, the Modal opens but hides (not dismissed) forever, until I reload the page before I could do anything.
By default when you create livewire using php artisan make:livewire --name, the view part comes with <div> //comment </div> tag. So, whenever the place the Modal inside the div tag the above problem occurs.
However, if the place the Modal in outside the div tag it works fine BUT NOT RECOGNIZING THE LIVEWIRE VARIABLES
I want to know;
If the livewire doesn't support Bootstrap Modal or having conflicts with the Modal scripts.
If one event can not be fired twice at the same time (wire:click and default click event).
Why except tags are enclosed inside the <div> </div> before livewire recognizes it.
<a href="#" wire:click="edit({{ $file->id }})" class="mr-1 edit" data-toggle="modal" data-target="#editFileModal">
<i class="align-middle fa fa-edit"></i>
</a>
By adding wire:ignore.self to the root element of my modal fixed it for me.
Modal trigger button.
<button wire:click="updateModal({{ $item->id }})" type="button" class="btn btn-sm btn-label-brand btn-bold" data-toggle="modal" data-target="#updateModal"> Update</button>
Example modal dialog.
<div wire:ignore.self class="modal fade" id="kt_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient" wire:model="recipient">
</div>
<div class="form-group">
<label for="message" class="form-control-label">Message:</label>
<textarea class="form-control" id="message" wire:model="message"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
You could use Alpine.js (that comes with Livewire) to fire both the wire:click and the toggle of the modal. By doing this you could even listen for the wire:click call to complete before you open the modal, if that suits you better.
<a href="#" x-on:click="$wire.edit({{ $file->id }}); $('#editFileModal').modal('show');" class="mr-1 edit">
<i class="align-middle fa fa-edit"></i>
</a>
I was having the exact same issue, here is my solution:
Instead of using the attribute data-target="#myModal" to show myModal when the button is clicked, I just use wire:click function to do that. ie:
<button class="btn btn-sm btn-danger" wire:click.prevent="myFunction({{$some_id}})">...</button>
In myFunction, do whatever you want, after that, add:
$this->dispatchBrowserEvent('openModal', ['someParameter' => 'some value']);
In the view file, add:
<script>
window.addEventListener('openModal', event => {
$('#myModl').modal('show');
//alert('parameter: ' + event.detail.someParameter);
})
</script>
See https://laravel-livewire.com/docs/2.x/events#browser for more info
HTML:
<!-- Button trigger modal -->
<a href="#" data-toggle="modal" data-target="#myModal" class="quickview">
OPEN MODAL
</a>
<!-- 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="myModalLabel">BX Slider</h4>
</div>
<div class="modal-body">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
<a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
<a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
slider.destroySlider();
//$('#myModal').modal('show');
slider.reloadSlider();
}
$(".quickview").on("click", quickView);
I have a Bootstrap modal which I'm injecting dynamic image galleries into. So fx. I have 10 links on a page, each link is containing unique data-attributes with image URLs. I am then sending these URLs into my click event, so I can use them with BXslider, but it doesn't seem to be working.
I'm reloading the BXslider within my click event, but the "mainimage" is not showing.
However, if I move the code out of the click event, it seems like it's working.
Any suggestions here?
Codepen:
http://codepen.io/marting/pen/dYNabj?editors=101
I changed your code to this, and it works like a charm
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
setTimeout(function() {
slider.reloadSlider();}, 200);
}
$(".quickview").on("click", quickView);
See it works here: http://codepen.io/anon/pen/JYgxOE?editors=101
Bootstrap navbar collapse menu not working with Turbolinks.
Working scenario
On page load
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse collapse" id="menu"> </div>
Click menu and dropdown
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse in" id="menu" style="height: auto;"> </div>
Click menu again and collapse
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse collapse" id="menu" style="height: 1px;"> </div>
Not working (after navigating to any page)
On page load
the same html, no need to repeat
Click menu and dropdown
the same html, no need to repeat
Click menu again and collapse
3.1. Transient change observed in the debugger
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapsing" id="menu" style="height: 96px;"> </div>
Note: class="navbar-collapsing" and height: 96px;
3.2. And then go back to the same state
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse in" id="menu" style="height: auto;"> </div>
Note: Same html as in step 2.
Libs versions:
Turbolinks 2.1.0
JQuery 2.0.3
Bootstrap 3.0.3
I hope someone can come up with a real answer or an explanation.
The responsible here is Turbolinks. And the workaround is to not load the Turbolinks javascript.
In the file
app/assets/javascripts/application.js
Delete this line
//= require turbolinks
Dirty Solution will be to put the following in your application.js
$(document).on("page:change", function() {
$(".navbar .dropdown").hover((function() {
$(this).find(".dropdown-menu").first().stop(true, true).delay(150).slideDown();
}), function() {
$(this).find(".dropdown-menu").first().stop(true, true).delay(50).slideUp();
});
});
Mind that it is change not load
Other solution.
Making permanent element. With jQuery open or close the dropdown.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="button-dropdown" data-turbolinks-permanent> Button</button>
Doc from Turbolinks
https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads
Add this on your headers.
<meta name="turbolinks-visit-control" content="reload">
I am making a Django application and using Twitter bootstrap carousel template for making a my site. I am planning to provide the sign up and sign in feature to the users through Twitter boostrap 3 modal.
and When I test modal simple with my external templates (not included in Django). My Modal runs well.
Here is my Modal code
<ul class="nav navbar-nav pull-right">
<!-- calling sign up modal -->
<li><a data-toggle="modal" href="#signup"><b>Sign Up</b></a></li>
<!-- calling sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
</ul>
Correct results
See image below
But when I run this modal from Django application templates. the modal loads but one grey transparent screen also loads over it and it makes the whole page disabled.
See image below
What would be the problem
I solved this issue by defining my modal code outside the ul tags, I put my modal code just after start of the body tag and it worked for me.
This is my code
<!-- Modal 1 -->
<!-- define the sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<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">TrackLeech Sign Up</h4>
</div>
<div class="modal-body">
<form class="navbar-form form-inline" align="left">
<input type="text" placeholder="username" class="form-control" style="width: 200px;">
<!-- Fb Login --> <div class="fb-login-button pull-right" data-width="400">Login with Facebook</div><!-- Add FB Button Here --> <br><br>
<input type="text" placeholder="email" class="form-control" style="width: 200px;"> <!-- Add Google Button Here --> <br><br>
<input type="password" placeholder="password" class="form-control" style="width: 200px;"> <!-- Add Twitter Button Here --><br><br>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button><br><br>
<a data-toggle="modal" data-dismiss="modal" href="#signin" >Already a member ? Sign In</a>
</form>
<div class="pull-right">
</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">Sign Up</button>
<a data-toggle="modal" href="#signin" >Already a member ? Sign In</a> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
This has resolved my issue now.