I found a few topics started on this issue however none about any workarounds for MVC environments. For everyone not familiar with the topic. Modals in twitter bootstrap 3.1.1 look faded, similar to the background. Check it here
What would be the workaround for this problem in Code Igniter or any other MVC?
The code that I use:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</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>
<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>
Related
I am a biginner of Laravel blade.
I wanted to split index.blade.php.
When the contents of morumoru.blade.php modal.blade.php are on index.html.it works well.
/view/camila/cabelo/index.blade.php
#yield('camila.cabelo.morumoru')
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
SAMPLE
</button>
#yield('camila.cabelo.blade')
/view/camila/cabelo/morumoru.blade.php
#section('morumoru.blade')
<ul>
<li>INDEX</li>
<li>SUN</li>
<li>MOON</li>
</ul>
#endsection
/view/camila/cabelo/modal.blade.php
#section('modal')
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">...</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
#endsection
use #include('camila.cabelo.morumoru') and #include('camila.cabelo.modal') instead of #yield
use include instead of yield, and remove #section also #endsection from blade files
Top include like this #include('camila.cabelo.morumoru')
Bottom include like this #include('camila.cabelo.modal')
My code is like this.
#if (Session::has('message'))
<script>
$(document).ready(function () {
$("#mailModal").modal('show');
});
</script>
<div class="modal fade" id="mailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index:10000000;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ Session::get('message') }}
</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>
#endif
Mail is sending successfully and also message is generating successfully but modal is not showing on page load. What is the problem in my code?
I'm working on a spring boot project,
I want to pass a simple id to my modal, the modal is just for ask to the user if He confirm the item deletion, if he confirm i want to send to my controller class /profil/{id}
but i don't understand how to pass my object id to the modal, it's my first spring boot project, I have no bases in JS...
my html code :
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Rendre disponible
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Rendre disponible</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Voulez vous rendre ce topo à son propriétaire ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Confirmer</button>
</div>
</div>
</div>
</div>
</div>
Thanks for your help !
you can use th:data to pass parameters to modal.
<button type="button" class="btn btn-primary"
th:data-yourid="id_you_want_to_pass" data-toggle="modal"
data-target="#exampleModal">Rendre disponible</button>
And you can get this value using javascript. The following will be triggered as soon as modal is about to show.
$('#exampleModal).on('show.bs.modal', function(e) {
var id= $(e.relatedTarget).data('yourid);
//do whatever you want to do with this id
});
I am trying to insert a modal into a html page. I took the example from bootstrap page:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</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>
It's not working(nothing pops up). I also use thymeleaf in my project and i think there is the problem but i don't know what it is. Thanks.
I am trying to get a modal to show upon redirect to a page.
I am following this response (Laravel how to redirect back to boostrap modal dialog window)
My controller:
return redirect('postings')->with('welcome_msg');
My view:
#if(Session::has('welcome_msg'))
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
#endif
<div class="modal fade" id="myModal role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
However, the modal is not showing upon pop-up. What am I doing wrong?
<div class="modal fade" id="myModal role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
#if(Session::has('welcome_msg'))
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
#endif
This may fix it. HTML has to load before javascript.
try this in your blade just before closing tag of </ body>
#if (session()->has('welcome_msg'))
<script>
$('#YourModalName').modal('toggle');
</script>
#endif