jQuery textFill with bootstrap modal - javascript

I use jQuery textFill to fit some dynamic text (from a database) into a div with predefined width.
My problem is that this plugin works great on a page, but i want to use it inside a twitter bootstrap modal. This doesn't seem to work. I create an example in jsFiddle. I use a div outside of the modal and a div inside. The out-of-modal div works fine. The div inside seems to have some problems :)
<div id="out-of-modal"> <span>Lorem ipsum. Lorem ipsum.</span></div>
<div id="inside-modal"> <span>Lorem ipsum. Lorem ipsum.</span></div>
Here is the example in jsFiddle
Do you have any idea of what to do ?

The problem is with the css selector hide you used here, because it has property display:none with important rule
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
and causing not the modal to show, so remove it and also for transitioning effects use css selector fade if you like
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog">
SideNote: In your fiddle you are missing key div elements of modal e.g <div class="modal-dialog"> and <div class="modal-content">
<div class="modal-dialog">
<div class="modal-content">
//Modal Header, Body and Footer Comes Here
</div>
</div>
Working fiddle

I am really late to this thread, but I found a solution to this problem. In the actual script, there's at some point this code
var ourText = $(Opts.innerTag + ':visible:first', this);
which basically tells jquery to pick the first <span> element inside our <div> that is visible. However, our text is obviously not visible, because it's inside the modal when the page is started, so it's hidden. There's a simple fix to this. Just go inside the library and edit that part into this and it should work perfectly:
var ourText = $(Opts.innerTag + ':first', this);

Related

Insert an image into a modal dialog

I want to insert an image in Modal but I need to use the value of the variable data-image as it will change according to the value of the image.
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var title = button.data('title')
var overview = button.data('overview')
var image = button.data('image')
var url = "<img src='https://image.tmdb.org/t/p/w600_and_h900_bestv2/+image+'></img>"
var modal = $(this)
modal.find('#title').text(title)
modal.find('#image').attr('src',url)
modal.find('#overview').text(overview)
})
</script>
<a href="#" role="button" data-id="{{$item['id']}}" data-title="{{$item['title']}}" data-image="{{$item['imagem']}}" data-overview="{{$item['overview']}}" data-toggle="modal" data-target="#myModal">
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"><div id="title"></div></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<p><div id="image"></div></p>
<p><div id="overview"></div></p>
</div>
</div>
</div>
I tried to use some shapes like text, val, innerhtml, but it didn't work. What is the best way to make it work what I need?
You need to use an img element as oppose to a div to set display your img and other content dynamically in your modal.
The reason its not working is DOM content is ready and you are applying styles to a div and it can not load an image asynchronously thats why you are not seeing anything.
I have added demo data and few other button to show that its all working now with different data coming from data-attributes.
Live Working Demo:
$('#myModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var title = button.data('title')
var overview = button.data('overview')
var image = button.data('image')
var modal = $(this)
modal.find('#title').text(title)
modal.find('#image').attr('src', image)
modal.find('#overview').text(overview)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Click Me
<br>
Click Me 2
<br>
Click Me 3
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">
<div id="title"></div>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p><img src="" id="image" /></p>
<p>
<div id="overview"></div>
</p>
</div>
</div>
</div>
First, understand what a modal dialog is: it is just a div (with content) that is positioned so that it sits on top of the rest of the page, usually accompanied by another div that sits directly underneath it and partially darkens the rest of the page while preventing the user from clicking on anything underneath. These two divs begin hidden, but can be displayed based on user activity, and then re-hidden.
The modal word indicates that this div structure has the focus - the user cannot interact with any other part of the page until the modal dialog is closed. This is accomplished via that second (overlay) div that is height/width 100% and is positioned (via z-index) to stack between the dialog and the rest of the page.
The important thing to note is that they are just ordinary div structures that exist on the page - or that are added to the page - at will. That means, you can change the content (text or html) inside the modal div structure as easily as you can change the content of any other div. There is nothing different about a modal div structure at all.
Bootstraps modal dialogs are exactly the same, but they include some extra sizzle that add some extra visual coolness and that make them a bit easier to work with. Other than that, they are exactly like self-made modal dialogs - which are exactly like ordinary div structures.
To demonstrate, we'll create a super-simple home-made modal dialog and use it to do what you request.
Note the following about the home-made modal dialog:
(a) We use position:fixed or position:absolute to remove the modal div structure from the usual HTML flow - allowing it to sit on top of the rest of the page.
(b) We use z-index to position the modal div structure ABOVE the rest of the page
(c) We add a second div (the "overlay") that sits on top of the page, but underneath the modal. Its purpose is to darken the page underneath the modal dialog and to prevent the user from clicking anything on the page until they finish with the dialog.
$('button').click(function(){
let img = $('#modal').data('image');
$('#modal-content').html(`<img src="${img}" />`);
$('#overlay, #modal').fadeIn();
});
$('#modal-close').click(function(){
$('#overlay, #modal').fadeOut();
});
#overlay{z-index:998;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);}
#modal{z-index:999;position:fixed;top:15vh;left:25vw;width:50vw;height:30vh;}
#modal-close{position:absolute;top:0;right:0;padding:10px;font-size:2em;border:1px solid grey;}
#modal-close:hover{color:dodgerblue; border:1px solid dodgerblue;cursor:pointer;}
#overlay, #modal{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='overlay'></div>
<div id='modal' data-image='http://placekitten.com/400/300'>
<div id='modal-close'>X</div>
<div id='modal-content'></div>
</div>
<button>Show Modal</button>
References:
Easiest way to use a div as a modal dialog with jQuery

Why a dialog modal needs to be placed as last direct child of the body?[Accessibility, a11y]

I am investigating how to build an accessible dialog modal in React.
I saw few sources suggesting to place the modal at the end of the DOM tree as direct child of the
E.g: https://assortment.io/posts/accessible-modal-component-react-portals-part-1
(Look for the When rendered, the Modal is appended to the end of document.body.. section.)
My question is.. WHY? What benefit is this bringing?
If I am not wrong, some of these sources meant that in this way the screen reader would ignore the other children of the body, so save the user from focusing on not desired elements.
If this is the reason, is this the suggested and only way of doing it?
My idea was to simply "trap" the user inside the modal not allowing them to focus on anything else outside the modal.
My idea was that if the user is on the first or last element of of the modal and is trying to go back or forward they will still be focusing on the first or last element of the modal. That using JS.
So, going back to the main question, why should I place the modal as a direct child of the DOM? Thank you!
Not necessarily a direct descendant, you just need to separate the modal from other content
in order to hide all content when the modal is opened
Here is a detailed description of your situation:
http://web-accessibility.carnegiemuseums.org/code/dialogs/
<body>
<!-- Add aria-hidden="true" if there is at least one pop-up window (Modal) -->
<div class="page" aria-hidden="true">
...
</div>
<div class="dynamic-place">
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<!-- Only one active modal per page: -->
<div role="dialog" aria-describedby="" aria-labelledby="">
Active modal
</div>
</div>
</body>
but you can also do the following:
to give all elements except the modal window aria-hidden=true, nobody forces you to wrap all content in a single block (as in the first example), this is just a suggestion that simplifies this task
<body>
<div aria-hidden="true">
...
</div>
<main aria-hidden="true">
...
</main>
<footer aria-hidden="true">
...
</footer>
<div class="dynamic-place">
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<!-- Only one active modal (opened) per page: -->
<div role="dialog" aria-describedby="" aria-labelledby="">
Active modal
</div>
</div>
</body>

modal-dialog appearing behind modal-backdrop

I am attempting to create a modal-dialog that opens on the button click. However, when I do this the modal-dialog opens being the modal-backdrop and the screen becomes grey and unclickable. This also results in the dialog being under the header of the site.
I am currently using to Laravel Spark framework, however I believe this should be universal for all.
This is my HTML.
<spark-tokens :tokens="tokens" :available-abilities="availableAbilities" inline-template>
<div>
<div>
...
<button class="btn btn-danger-outline" #click="approveTokenDelete(token)">
<i class="fa fa-times"></i>
</button>
...
</div>
...
<!-- Delete Token Modal -->
<div class="modal fade" id="modal-delete-token" tabindex="-1" role="dialog">
<div class="modal-dialog" v-if="deletingToken">
<div class="modal-content">
...
</div>
</div>
</div>
</div>
</spark-tokens>
This is the JS that I am using to open the modal.
module.exports = {
...
methods: {
...
/**
* Get user confirmation that the token should be deleted.
*/
approveTokenDelete(token) {
this.deletingToken = token;
$('#modal-delete-token').modal('show');
},
...
}
};
I have seen problems similar to this being asked but none of the solutions have worked for me. I have tried moving the "modal fade" div outside of it's encompassing div (so right about the tag). This caused the dialog to not show up at all. I have attempted to change the z-index of modal-backdrop, however, I cannot find the correct file to change this in. Is there another solution to this problem? Any help you all can provide will be greatly appreciated. Thank you!

Bootstrap - Issue with Multiple Modals

i am trying to make a bootstrap website, and im having an issue with modals.
I can make the first one fine, but when i go to make the second one it just wont open?
the only linking tag i can see in the code is:
div class="modal fade" id="project-modal1" tabindex="-1" role="dialog" aria-labelledby="project-modal-label" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
And this is what i have on the image i want to link:
<a href="#" class="thumbnail" data-toggle="modal" data-target="#project-modal1">
<img src="img/port1.jpg" alt="">
</a>
is there abything im missing? as i said, one works fine, but when i add a second and change the "id" it wont load?
I have an internal site at work using bootstrap modals and on my a elements I have the href set as href="#project-modal1" and don't event have a data-target attribute and it works great.

Bootstrap Modal Overlaps Menu

I just attached a bootstrap modal to a button on a Wordpress site, and it's working great.
But the problem is, the modal hides the navigation menu (specifically the "blog" link) when it's inactive, the first time. After you open the modal and close it out, the modal disappears and the menu works fine.
I've tried a few things, like fiddling with the z-index, and also I tried hacking a script together:
<script>
jQuery(document).ready(function() {
jQuery('#subscribe').modal('hide')
});
</script>
So far, no dice. But maybe you can tell from the script, I'd just like to put the modal on hidden state when the page loads, and only have it called when they click the button.
Here's my site. If you try clicking on the "blog" link on a laptop or smaller screen, you can't, because it's hidden by the modal:
http://jackalopemedia.com/jasontreu
Appreciate any help!
Ok I found the solution
You must add a class called hide. Because fade function is to set opacity:0 of the div. So its just hide in-front of the page.
So your line should be
<div id="subscribe" class="modal hide fade" role="dialog">
For more details visit bootstrap
Compare Your Modal With This, If Your Code Match With This, It Should Be Working.
<div class="modal fade hide" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2>Title</h2>
</div>
<div class="modal-body">
<span>body</span>
</div>
<div class="modal-footer">
<span id="spanbtnclode" > <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></span>
</div>
</div>
</div>
</div>

Categories

Resources