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.
Related
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)
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>
I am displaying a dialog by using HTML directly
<!-- Dialog -->
<div class="modal fade" id="exampleModalCenter" 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">
<h3 class="modal-title" id="exampleModalLongTitle">Something went wrong</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="modal-title" id="exampleModalLongTitle">Maximum 10 messages selected</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#exampleModalCenter">RunIt</button>
but I would like to do something previously so I would like to execute data-toggle="modal" data-target="#exampleModalCenter" by javascript using (click)
So basically this would be the steps:
1- (click)="test()"
2- execute data-toggle="modal" data-target="#exampleModalCenter" by javascript in test()
to get the DIV that contains it, I have tried:
test(){
var dialog= <HTMLDivElement>document.getElementById(exampleModalCenter);
}
but I can not find the exampleModalCenter
you should be using attr.data-target
<button data-toggle="collapse"
[attr.data-target]="'#exampleModalCenter">RunIt
</button>
Firstly, you must add click method 'test' to button. Change your modal's class name as 'modal fade'. And after, your ts file must be like this:
#ViewChild('exampleModalCenter') exampleModalCenter;
test() {
this.exampleModalCenter.nativeElement.className = 'modal fade show';
}
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/
I'm building a website using bootstrap. But i'm come to somewhat of an dead-end. i've created a modal from an given example (see below). As you might see, this is a modal taken straight from their website.
<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">Nieuwe Taak toevoegen</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>
I open this dialog using a button.
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >
But i want to keep my modals in seperate aspx/html-files. How can i open these modals when they are kept inside different html/aspx - files ?
example:
if the button is inside index.Html but the modal is inside newTaskModal.html, how would i open the modal? (If both are inside index.html, then there are no problems)
Note: I don't/can't use HTML5 (company-standards)
if you're using jquery, you could download the page using an ajax call:
$.ajax({
url: 'newTaskModal.html',
dataType: 'text',
success: function(data) {
alert(data);
// todo: add the html to the dom...
}
});
If you're building a single page application you might want to check out a framework designed to solve this type of problem:
durandal
Can you use PHP? If so there is simple solution.
Your index will be index.php and where you want to have your modal just place this code
<?php include "newTaskModal.html"; ?>
Also you could if you are using JQuery to load your html page into into a matched element.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
Go to http://api.jquery.com/load/ for more info.
STEP 1 Use below code for link:
<a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>
STEP 2 Use below code for modal window
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog model-sm">`enter code here
<div class="modal-content"> </div>
</div>
</div>
STEP 3 Create MyModal.html and place some text.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Modal Contents
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">OK</button>
</div>
Note: This may not work local html. works only on server!