I'm trying to get a bootstrap 3 modal to pop in a meteor app without any success at all. Everything seems to be in place, I've scoured here and else where and it simply won't work.
The HTML is
<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
<div class="modal fade in show" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p> Hi There</p>
<div class="modal-dialog">
<div class="modal-content">
<p> Hi There again</p>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Big Image</h4>
</div>
<div class="modal-body">
<img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
</div>
</div>
</div>
</div>
</template>
Which is triggered from a click event on an image thumbnail (which is working according to console.log
The code trying to show the dialog is
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
Session.set("selectedImageId", t.data._id);
console.log("Image ID: "+ Session.get("selectedImageId"));
//var stuff=$('#projectImageModal');
//console.log(stuff);
//stuff.modal('show');
// $('#projectImageModal').modal().modal("show");
$("#projectImageModal").modal("show");
//$('#projectImageModal').modal('show');
//$('.projectImageModal').modal('show');
}
};
Which is largely pulled directly from the cfs-file-handler example (which doesn't used bootstrap and calls the modal().modal("show") version to get the modal to pop).
You can see the variations I've tried. The console shows that the event is fired, the selector seems to be working but.. the modal NEVER pops.
Thanks. Peter.
I have tried the code below and it works as expected. If I add show to class="modal fade in" the modal immediately appears. If in your case it doesn't you are probably missing something else that is not shown in the sample code.
HTML
<head>
<title>modal</title>
</head>
<body>
{{> projectImageItem}}
{{> projectImageModal}}
</body>
<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
<div class="modal fade in" id="projectImageModal" 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">Big Image</h4>
</div>
<div class="modal-body">
<img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
</div>
</div>
</div>
</div>
</template>
<template name="projectImageItem">
<input type="button" class="open-modal" value="Show modal." />
</template>
JS
if (Meteor.isClient) {
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
$("#projectImageModal").modal("show");
}
};
}
Related
I've some problem with a bootbox confirm dialog, when it shows up it's as
I'm using this inside a metronic 8.1 template and invoking it as
bootbox.confirm({
size: "small",
message: "Are you sure?",
callback: function (result: boolean) {
if (result) {
_this.spinner.show();
_this.dataOwnerService.deleteData(item.id).subscribe(() => {
_this.notifyService.showSuccess("Item deleted successfully.", "Success");
_this.refresh();
},
() => {
_this.notifyService.showError(
'Error while deleting item.',
'Unable to delete.'
)
}, () => {
_this.spinner.hide();
})
}
}
});
As far as I've read there's no way to customize the button, and even on the homepage of the library there's no style loaded, but it appears on the right and correctly rendered
What can I check?
Thanks
Kinda of old question, but: you'll see that when using Bootbox with Bootstrap 5 - the v5 version of Bootbox doesn't generate a modal with the updated Bootstrap 5 classes and content.
Basically, what Bootstrap 5 wants:
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</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>
versus what we create:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="bootbox-close-button close" aria-hidden="true">×</button>
<div class="bootbox-body">Hello world!</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary bootbox-accept">OK</button>
</div>
</div>
</div>
</div>
I do have a work-in-progress update that addresses this, if you're okay with prerelease versions: https://github.com/makeusabrew/bootbox/tree/v6-wip
We (meaning I) have pushed out a v6 version of Bootbox that should work as intended with Bootstrap 6. Please note that while Bootstrap no longer requires jQuery, Bootbox still does.
I have a modal dialog in my ASP.NET Web application using the following code:
<div class="modal fade" id="mdlNewNote" tabindex="-1" aria-labelledby="mdlNewNoteLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mdlNewNoteLabel">Add New Note</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="was-validated" id="frmNote" name="frmNote" method="post">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-floating col-sm-12">
<textarea class="form-control" rows="10" id="NoteBody" name="NoteBody"></textarea>
<label for="NoteBody">Notes</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
In that block there is a <textarea> element that I want to be sized inside the modal according to its row count, which is set at 10. However, it only actually displays three rows in the modal, as shown below:
How do I fix it so that the <textarea> element is as tall as it should be (based on number of rows it is given) rather than the 3 rows it shows now?
With bootstrap, you have to override the height by using:
.specific-textarea { height: 100% !important; }
cf:
https://stackoverflow.com/a/58398265/12172974
Use HTML for textarea sizing.
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
I tried the following code found online to trigger one bootstrap modal with multiple buttons.
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").on('show.bs.modal', function(event){
var button = $(event.relatedTarget);
var titleData = button.data('title');
var kbtext = button.data('whatever');
$(this).find('.modal-title').text(titleData);
$(this).find('.modal-body').text(kbtext);
});
});
</script>
HTML:
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
data-whatever="test 1" data-title="Test1">Test 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
data-whatever=' Click here'
data-title="Test2">Test 2</button>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="text-align:center;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal Window</h4>
</div>
<div class="modal-body">
Test body of modal.
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
The problem is that the modal does not properly display the link in Test 2 button. I tried all types of combinations of quotes and escape codes for quotes that I could think of. Nothing worked. What quotes should I use for data-whatever for the second button, that is for
data-whatever=' Click here'
In particular, the following did not work
data-whatever=" Click here"
In second button you have HTML content data-whatever=' Click here' but you are handling it as .text();
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-whatever=' Click here' data-title="Test2">Test 2</button>
In script just change this .text(kbtext);
$(this).find('.modal-body').text(kbtext);
to this .html(kbtext);
$(this).find('.modal-body').html(kbtext);
You are passing HTML content as text so that's why the link was showing like below in modal body
Click <a href='https://www.math.washington.edu'>here</a>
but you want to show content as HTML then use .html(); method more information and link will show like below in modal body
Click here
so second button will be like
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-whatever="Click <a href='https://www.math.washington.edu'>here</a>" data-title="Test2">Test 2</button>
and Script
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").on('show.bs.modal', function(event){
var button = $(event.relatedTarget);
var titleData = button.data('title');
var kbtext = button.data('whatever');
$(this).find('.modal-title').text(titleData);
$(this).find('.modal-body').html(kbtext);
});
});
</script>
Fiddle Example
Whit AngularStrap modal directive, is it possible to open another modal dialog inside/within a modal box?
What I'm trying to do is, open a modal box that contains a list of items to select. Inside this modal box there's a button to open another modal box to do a search on the item list.
But I got error when click on the button inside the modal box. Is there something I missed?
Here is a code sample on jsfiddle: http://jsfiddle.net/zeroxp/t3yv94d1/
<script type="text/ng-template" id="modal01.tpl.html">
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr><th>fruits <button class="btn btn-sm btn-info" data-bs-modal="modalSearch" data-template="modal02.tpl.html">search</button></th></tr>
</thead>
<tbody>
<tr data-ng-repeat="item in items" data-ng-click="itemSelected(item)"><td>{{item}}</td></tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="modal02.tpl.html">
<input type="text" class="form-contorl"/>
</script>
I have created the model using bootstrap 3 but my model fades with the background and does not work.
Here is the screenshot and code!
Upload
<div class="modal fade" id="upload" tabinex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>Upload Image</h2>
</div>
<div class="modal-body">
<p>select an image</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is a working sample. http://jsbin.com/togozico/1/edit. Is your problem with z-index?