We Keep Coding

Bootstrap modal window not opening from inside bootstrap popover

when you click "MAGIC" then a bootstrap popover is shown and there you see the settings icon. If you click that icon a modal window should open, like if you click on the blue button "Launch demo modal". How can I fix that? What is the problem?
Here my code: https://jsfiddle.net/vhsqf65z/
<span data-html='true' data-toggle='popover'
title='<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"><i class="glyphicon glyphicon-cog"></i></button>'
data-content='<b>content</b>'> MAGIC </span>
<!-- 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">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>
Thanks
Edit:
Added an image showing the popover and settings button.
enter image description here

I modified your code, removed handling inserted.bs.popover event:
https://jsfiddle.net/05nzfcak/
I tested it works (if I understood correctly what you want)

how to pop up a modal upon putting the cursor in a textarea

I have a small textarea, and as the user puts the cursor inside it, I want a modal to popup as a larger version of this textarea.
I prepared all code, but couldn't find the part of putting the cursor in the textarea to populate the modal.
Textarea :
<textarea href ="#s-fb" class="form-control" name="sfb" id="sfb" rows="2" value="" placeholder="We would appreciate your feedback to improve the website"></textarea>
Modal :
<div class="modal fade" tabindex="-1" role="dialog" id="s-fb">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
...
...

Please try this one.
$('#sfb').click(function(){
$('#s-fb').modal('show')
})
Hope this helps.

Use onmouseover event to trigger an event when the mouse is placed over the textarea.
onmouseover="showModal()"
function showModal(){
document.getElementById('s-fb').style.display = 'block';
}

You want to use the onmouseover function for your text input. Something like this will work:
<input type="text" onmouseover="$('#exampleModal').modal('show')">
<!-- 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">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>

Getting modal to show within called vue method

Not sure whats going on here but when I click the button calling a function it won't show my modal.
The function call itself works because the commented out alert will show if I uncomment it. How do I need to be showing the modal within this method?
No errors in the console either
<button #click="eventClick"></button>
<div id="example-modal">
<!-- 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">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">
hihi
</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>
</div>
eventClick: function(e) {
var eventObj = e.event;
//alert('Clicked ' + eventObj.title);
let element = this.$refs.modal.$el;
$(element).modal('show');

It's hard to tell based on the code presented. The modal ref isn't defined.
In general, you really don't want to mix JQuery into Vue - especially when JQuery is modifying the state of a component (in this case the visual state: shown/not shown).
The preferred way to render a modal is with a standard v-if, as shown in this example.

How can I change text inside a modal with jquery ?

Hello guys I tried to create a pokedex by using pokeapi.
My modal looks like this:
<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="exampleModalLongTitle"> #1 Pokemon-Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Some information
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
and the js like this:
const button = document.createElement("BUTTON");
button.setAttribute("data-toggle","modal");
button.setAttribute("data-target","#exampleModalCenter");
And my question is how can I change the title and the description of the modal to bulbasaur ?
Full Code: https://www.codeply.com/go/qoCnPUDDxG

With plain javascript:
document.getElementById('exampleModalLongTitle').textContent = 'Bulbasaur';
With jQuery:
$('#exampleModalLongTitle').html("Bulbasaur");
Do the same for whichever element contains your description.

For the modal title:
document.getElementById("exampleModalLongTitle").innerHTML="bulbasaur"; //pure JS
$("#exampleModalLongTitle").html("bulbasaur") //with Jquery
For the description, add a id attribute to your HTML element
<div id="modalDescription" class="modal-body">
Some information
</div>
document.getElementById("modalDescription").innerHTML="bulbasaur description"; // pure JS
$("#modalDescription").html("bulbasaur description") //with Jquery

you can get reference of div using id of and set content inside it.
//In Jquery
$('#exampleModalLongTitle').html("your text");
//In js
document.getElementById('exampleModalLongTitle').textContent = 'you text';

Bootstrap 3: prevent modal inside modal to trigger (hidden.bs.modal) every time

I have one modal inside another modal and I've managed to make the inner one close without affecting the other. The problem is that when the second modal is closed it triggers the 'hidden.bs.modal' event for its self and for the first modal.
<!-- My Html -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog modal-sm">
<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">Demo Modal</h4>
</div>
<div class="modal-body">
<p>
Upload image
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="uploadImage-title">Upload new image</h4>
</div>
<div class="modal-body">
Testing Area
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
<button type="button" class="btn btn-success">Accept</button>
</div>
</div>
</div>
</div>
</div>
<!-- My JS-->
$('#btnUploadCancel').click(function () {
$('#uploadImage').modal('toggle');
});
$(document).on('hidden.bs.modal', '#myModal', function () {
alert("hello");
});
$(document).on('hidden.bs.modal', '#uploadImage', function () {
alert("goodbye");
});
Here is a jsFiddle example that I made.
The reason for this question is that I need to trigger an action only when the second modal gets hidden and then something else when the first one gets hidden. Any ideas on how to fix this using the event for each of them???
Note: The second modal has to be inside the other as they are called as a partial view.

I'm guessing that these modal elements are being introduced to the page asynchronously, and that's why you're using a delegated event listener bound to the document rather than binding hidden.bs.modal directly to #myModal and #uploadImage themselves. If this is not the case, and you can get away with binding directly, I'd suggest using this approach to catch the hidden event on #uploadImage itself, and prevent it from bubbling up the DOM tree using something like event.stopPropagation();.
Alternatively, though, you can continue to delegate this handler to the document, and use the target property of the Event object passed into your handler callback to determine which element was the actual source of the event:
$(document).on('hidden.bs.modal', '#myModal', function (event) {
if (event.target.id == 'uploadImage') {
// do stuff when the upload dialog is hidden.
}
else if (event.target.id == 'myModal') {
// do stuff when the outer dialog is hidden.
}
});
P.S.: As you may already know, the Bootstrap framework does not support overlapping modal dialogs. Be aware of this as you continue to nest modals within modals, especially concerning dismissal elements initialized via the markup API and data-dismiss="modal".
P.P.S.:

The second modal html doesn't have to be included in the first modal body. Include only the data-target link and move the second modal outside the first. This way the events will fire as you expect.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog modal-sm">
<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">Demo Modal</h4>
</div>
<div class="modal-body">
<p>
Upload image
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="uploadImage-title">Upload new image</h4>
</div>
<div class="modal-body">
Testing Area
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
<button type="button" class="btn btn-success">Accept</button>
</div>
</div>
</div>
</div>
http://jsfiddle.net/wytf57mL/3/