On my page, I have a table. Inside one of the cells of that table is a link. I am performing jQuery scripts if that link is clicked. For instance if the link is clicked I want to show a Bootstrap Dialog. This can be done easily with Bootbox.js. However, bootbox is not updated with support of Bootstrap 4.
Originally, the bootbox wouldn't even show because in Bootstrap 3, the class name to show something was in, but in Bootstrap 4 it is show. I have fixed that, but here is how it looks currently.
The HTML that is generated by calling bootbox.js for this is:
<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Test Title?</h4>
</div>
<div class="modal-body">
<div class="bootbox-body">Test Message</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
<button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
</div>
</div>
</div>
</div>
The problem is that in the div where the class is modal-header, the button comes before the h4 element. If those were switched, then this problem would be solved, but that is what I need help with. How would I do that via the bootbox syntax? I know I could just remove the title for now until bootbox becomes updated to support bootstrap 4, but I'm curious if this can be done.
Here is what I have so far:
bootbox.confirm({
className: "show", // where I had to manually add the class name
title: "Test Title?",
message: "Test Message",
buttons: {
cancel: {
label: "<i class='fa fa-times'></i> Cancel"
},
confirm: {
label: "<i class='fa fa-check'></i> Confirm"
}
},
callback: function (result) {
// my callback function
}
});
You can just resolve it by css:
.bootbox .modal-header{
display: block;
}
it can be fixed with:
.bootbox .modal-header {
flex-direction: row-reverse;
}
To fix this, you just reverse the positions (in the HTML) of the headline and the x like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Test Title?</h4>
<button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="bootbox-body">Test Message</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
<button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
</div>
</div>
</div>
</div>
When searching for closeButton here: https://raw.githubusercontent.com/makeusabrew/bootbox/master/bootbox.js things do a little bit hard-coded to me.
However, if you change
dialog.find(".modal-header").prepend(closeButton);
to:
dialog.find(".modal-header").append(closeButton);
in that file, the problem should be fixed.
EDIT:
Actually, there's also dialog.find(".modal-title").html(options.title);
So, you need to append the closeButton to the title. Then it's gonna work as expected.
If people stumble upon this there is a now a version of bootbox 5 which supports bootstrap 4. You can find it here https://www.nuget.org/packages/Bootbox.JS/5.0.0-beta
Perhaps you can re-order the dom in the bootbox callback function, like:
bootbox.confirm({
...
callback: function () {
$('.modal-header').prepend('.modal-title');
}
});
here is what i've done and it worked:
go to your js file (mine is bootbox.min.js), find this line :
var m=b(n.closeButton);a.title?d.find(".modal-header").prepend(m)
and change it for:
var m=b(n.closeButton);a.title?d.find(".modal-header").append(m)
So you just need to change it for "append" and the closebutton should normally be on the right side.
Related
So in the near future my shop is going to upgrade to Bootstrap 4 but we cannot do this until we solve the issue with using remote modals. Here is an example of how we load our modals. The reason we use remote modals is because the modal-body is dynamic and may use different file based on the url. I have heard that using jQuery("#newsModal").on("load",..) is an alternative but how could I do this? I found this but I am not sure how my anchor would look and how to build the url to load the remote data.
Global PHP include file:
<div id="NewsModal" class="modal fade" tabindex="-1" role="dialog" data-
ajaxload="true" aria-labelledby="newsLabel" 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>
<h3 class="newsLabel"></h3>
</div>
<div class="noscroll-modal-body">
<div class="loading">
<span class="caption">Loading...</span>
<img src="/images/loading.gif" alt="loading">
</div>
</div>
<div class="modal-footer caption">
<button class="btn btn-right default modal-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
modal_news.php file:
<form id="newsForm">
<div id="hth_err_msg" class="alert alert-danger display-hide col-lg-12 col-md-12 col-sm-12 col-xs-12">
You have some errors. Please check below.
</div>
<div id="hth_ok_msg" class="alert alert-success display-hide col-lg-12 col-md-12 col-sm-12 col-xs-12">
✔ Ready
</div>
<!-- details //-->
</form>
Here is how we trigger the modals :
<a href="#newsModal" id="modal_sbmt" data-toggle="modal" data-target="#newsModal"
onclick="remote='modal_news.php?USER=yardpenalty&PKEY=54&FUNCTION=*GENERAL'; remote_target='#NewsModal .noscroll-modal-body'">
<span class="label label-icon label-info">
<i class="fa fa-bullhorn"></i>
</span>
Promotional Ordering
</a>
I think I need to do something like this when building anchor dynamically:
a) Replace paramters with data-attrs
b) Use the event invoker to get the data-attrs using event.target.id
Thanks to Tieson T. and this post I was able to effectively pass parameters to the remote modal using this technique except if you have multiple modals
I have also included some helpful techniques inside this example as to how you may pass parameters to the remote modal.
bootstrap_modal4.php:
<div class="portlet-body">
Add Attendee <i class="fa fa-plus"></i>
</div>
<!-- BEGIN Food Show Attendee Add/Edit/Delete Modal -->
<div id="attendee" class="modal fade" tabindex="-1" role="dialog" data-ajaxload="true" aria-labelledby="atnLabel" aria-hidden="true">
<form id="signupForm" method="post">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<label id="atnLabel" class="h3"></label><br>
<label id="evtLabel" class="h6"></label>
</div>
<div class="modal-body">
<div class="loading"><span class="caption">Loading...</span><img src="/images/loading.gif" alt="loading"></div>
</div>
<div class="modal-footer">
<span class="caption">
<button type="button" id="add_btn" class="btn btn-success add-attendee hidden">Add Attendee <i class="fa fa-plus"></i></button>
<button type="button" id="edit_btn" class="btn btn-info edit-attendee hidden">Update Attendee <i class="fa fa-save"></i></button>
<button type="button" id="del_btn" class="btn btn-danger edit-attendee hidden">Delete Attendee <i class="fa fa-minus"></i></button>
<button class="btn default modal-close" data-dismiss="modal" aria-hidden="true">Cancel</button>
</span>
</div>
</div>
</div>
</form>
</div>
<script>
jQuery(document).ready(function() {
EventHandlers();
});
function EventHandlers(){
$('#attendee').on('show.bs.modal', function (e) {
e.stopImmediatePropagation();
if($(this).attr('id') === "attendee"){
// Determines modal's data display based on its data-attr
var $invoker = $(e.relatedTarget);
var fscode = $invoker.attr('data-fscode');
console.log(fscode);
// Add Attendee
if($invoker.attr('data-atnid') === "add"){
$("#atnLabel").text("Add New Attendee");
$(".add-attendee").removeClass("hidden");
}
else{ //edit/delete attendee
$("#atnLabel").text("Attendee Maintenance");
$(".edit-attendee").removeClass("hidden");
}
//insert hidden inputs
//add input values for post
var hiddenInput = '<INPUT TYPE=HIDDEN NAME=FSCODE VALUE="' + fscode + '"/>';
$("#signupForm").append(hiddenInput);
}
});
$('#attendee').on('hidden.bs.modal', function (e) {
$(".edit-attendee").addClass("hidden");
$(".add-attendee").addClass("hidden");
$("#signupForm input[type='hidden']").remove();
});
// BOOTSTRAP 4 REMOTE MODAL ALTERNATIVE FOR BOOTSTRAP 3v-
$('#add-attendee').on('click', function(e){
$($(this).data("target")+' .modal-body').load($(this).data("remote"));
$("#attendee").modal('show');
});
}
</script>
bootstrap_remote_modal4.php:
<form id="signupForm">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
Hello World!
</div>
</form>
<script>
$(document).ready(function(){
console.log('<?php echo $_GET["USERNAME"]?>'); //passed through url
});
</script>
NOTE: I am having problems with event propagation during the show.bs.modal event which I have a global show.bs.modal that is propagating up to this event handler due to multiple modals so if you have multiple modals make sure to handle them correctly.
Here is a screen shot of the results which clearly show propagation is taking place but the parameter passing techniques are working.
You might find it easier to use something like Bootbox.js, which can be used to dynamically create Bootstrap modals.
Given what you've shown, it would work something like:
trigger modal
with
$(function(){
$('.show-modal').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
$.get(url)
.done(function(response, status, jqxhr) {
bootbox.dialog({
title: 'Your Title Here',
message: response
});
});
});
});
This assumes response is an HTML fragment.
Bootbox hasn't officially been confirmed to work with Bootstrap 4, but I haven't run into any problems with it yet (modals seem to be one of the few components that don't have updated markup in BS4).
Disclaimer: I am currently a contributor to Bootbox (mainly updating the documentation and triaging issues).
If you must use only the Bootstrap modal, you're actually after load(). You would probably do something like:
$(function(){
$('.show-modal').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
var dialog = $('#NewsModal').clone();
dialog.load(url, function(){
dialog.modal('show');
});
});
});
I'm trying to write a function in JavaScript that opens an model when a player enters a certain box. The model does pop up, but it no longer closes.
This is used to open the model :
The JavaScript:
superFight(){
function ModalLink(){
$('#myModal').modal('show');
}
ModalLink();
}
The HTML Model:
<div id="myModal" class="" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modaldd Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I already tried to use $('#myModal').modal('hide'); and $('#myModal').modal({ show: false});
This did not work. When I put it in the console, it gave :
> $('#myModal').modal({ show: false});
< false = $1
I also tried an onClick function in the close button to activate a function to close the modal, but this not work either.
Basically what I'm trying to do, is to open and close an modal programmatically. Whenever an superFight(); is started, it should pop up with some info. And the user should be able to close it when done.
I'm writing the code in an ionic app.
Figured it out.
I changed the code in superFight() to:
function superFight(){
$('#myModal').show();
$('#myModal').modal('show');
$( ".simplemodal-overlay" ).show();
}
Added an onClick the HTML:
<button type="button" class="close" data-dismiss="modal" onclick="CloseModalSpel()">×</button>
And then in the page, I added this function at the bottom:
function CloseModalSpel(){
$('#myModal').hide();
$( ".simplemodal-overlay" ).hide();
}
It now opens, and closes the modal.
Earlier i was using a jquery dialog to show a pop-up message. However I need to use boostarp for my project and I am not able to figure out a way to actually show the pop-up.
The code that i used for my jquery dialog:
showUserWarningMessage: function (title, message, callback, scope, username) {
var $dialog = $("#dialog-move-user-warning");
$dialog.dialog({
resizable: false,
height: 450,
width: 580,
modal: true,
top: 200,
dialogClass: "warning-dialog",
title: title,
position: ["center", 200],
open: function () {
$dialog.find(".btn-default").on("click", function () {
$dialog.dialog("close");
});
$dialog.find(".btn-primary").on("click", function () {
$dialog.dialog("close");
if (callback) {
if (scope) {
callback.call(scope);
} else {
callback();
}
}
});
},
And he code im writing for bootstrap modal:
showAlertMessage: function(options) {
var $dialog = $("#dialog-move-user-warning");
$dialog.modal("show");
}
HTML:
<div class="modal fade" id="dialog-move-user-warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">User Info</h4>
</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>
For some reason its not displaying anything on the screen, though the background gets disabled as though there is an overlay popped, but can see it. i tried changing the defaults set for the class="modal", but it didnt help.
What im i doing wrong, or anything additional needed for the overlay to display?
is there any css that i need to change?
Thanks in advance!
Below are multiple ways opening modal dialog using bootstrap
Method 1: Open modal window using javascript
$("#myModal").modal('show');
Method 2:
<button (click)="deleteStudent(item.student_id)" class='btn btn-danger'>Delete</button>
Method 3:
<button class='btn btn-success' data-toggle="modal" data-target="#myModalMore">Open</button>
Method 4:
<button href="#mypop" class="btn btn-success" data-backdrop="false" data-toggle="modal">Open Modal</button>
<div id="mypop" class="modal fade">
//modal code here
</div>
If you want to show a modal using Bootstrap, why don't you use Bootstrap?
1. Add the modal html to your page.
The modal html you've provided is valid, if you are not certain, you can find the exact code and more examples here: http://getbootstrap.com/javascript/#modals-examples
2. Add a trigger to your page.
Data-target should be equal to your modal ID, which is #dialog-move-user-warning in your case.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
3. Make sure you have bootstrap.js and bootstrap.css included on your website.
The Bootstrap modal relies heavily on bootstrap.js. You don't need everything, what you will find in the JSFiddle below is just enough.
http://jsfiddle.net/fgxmcnd2/3/
We are currently stuck using bootstrap 2.3.2, and are looking to replace our current dialogs with bootstrap's modals.
I've located all the views where modals need to be instantiated and attempted 2 ways to call them without success.
With JS:
Html:
<a title='New Group' class='btn btn-fancy' id="btn-new-group" data-bind="visible: Value() == 'CanCreateNewGroup', click: corp.page.CreateGroupDialog.show">New Group<i class="fa fa-fw fa-lg fa-users"></i></a>
JS:
define([
'app-utils',
'jquery',
'bootstrap'
], function (utils) {
var CreateGroupDialog = function () {
};
CreateGroupDialog.prototype = $.extend(true, CreateGroupDialog.prototype, {
show: function (model) {
var dialog = $('#testing-bootstrap').modal({
toggle: true,
show: true,
keyboard: true
});
}
});
return CreateGroupDialog;
});
Without JS:
Html:
<a data-target="#testing-bootstrap" data-toggle="modal" class="btn btn-simple show_tooltip" title="Create Group"><i class="fa fa-fw fa-plus-circle"></i><span>Create Group</span></a>
The reason why I have to come here is that I get NO console errors, NO clue. The JS in my example is being hit, bootstrap is included and I've stepped through bootstrap code and it is loading my modal's html, but it is not coming up on the screen in EITHER way, with no console errors.
Actual modal markup (from bootstrap's example)
<div id="testing-bootstrap" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Thanks, everyone.
I'm not totally sure how the binding is working in your example - it appears to use the Knockout data-bind attribute, but the rest is jQuery. I'm guessing that your CreateGroupDialog is not being correctly bound to the modal HTML - especially since you are using require.js. If the HTML without JS does not work either, there could be something else wrong, but I would modify your constructor code to bind to your <a> that should trigger the modal.
var CreateGroupDialog = function () {
$( 'a[title="Create Group"]' ).click( $.proxy( this.show, this ) );
};
Then instantiate it:
var modal = new CreateGroupDialog;
The suspected html in the description area of this question was part of an HTML partial which was being called in an area of the application that was not going to be visible then.
If you are using html partials then look into their visibility before doubting the bootstrap modals. That was my problem.
If I go here
http://getbootstrap.com/2.3.2/javascript.html#modals
And click 'Launch demo modal' it does the expected thing. I'm using the modal as part of my signup process and there is server side validation involved. If there are problems I want to redirect the user to the same modal with my validation messages displayed. At the moment I can't figure out how to get the modal to display other than a physical click from the user. How can I launch the model programmatically?
In order to manually show the modal pop up you have to do this
$('#myModal').modal('show');
You previously need to initialize it with show: false so it won't show until you manually do it.
$('#myModal').modal({ show: false})
Where myModal is the id of the modal container.
You should't write data-toggle="modal" in the element which triggered the modal (like a button), and you manually can show the modal with:
$('#myModal').modal('show');
and hide with:
$('#myModal').modal('hide');
This is a code for Bootstrap v5 without jQuery.
let myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
myModal.show();
Demo
And this is a codesandbox demo to open modal on page load programmatically.
https://idu6i.csb.app/
Refs
https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
https://getbootstrap.com/docs/5.0/components/modal/#show
If you are looking for a programmatical modal creation, you might love this:
http://nakupanda.github.io/bootstrap3-dialog/
Even though Bootstrap's modal provides a javascript way for modal creation, you still need to write modal's html markups first.
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
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-label="Close"><span aria-hidden="true">×</span></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>
JS
$('button').click(function(){
$('#myModal').modal('show');
});
DEMO JSFIDDLE
you can show the model via jquery (javascript)
$('#yourModalID').modal({
show: true
})
Demo: here
or you can just remove the class "hide"
<div class="modal" id="yourModalID">
# modal content
</div>
I wanted to do this the angular (2/4) way, here is what I did:
<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`
Important things to note:
visible is a variable (boolean) in the component which governs modal's visibility.
show and in are bootstrap classes.
An example component & html
Component
#ViewChild('rsvpModal', { static: false }) rsvpModal: ElementRef;
..
#HostListener('document:keydown.escape', ['$event'])
onEscapeKey(event: KeyboardEvent) {
this.hideRsvpModal();
}
..
hideRsvpModal(event?: Event) {
if (!event || (event.target as Element).classList.contains('modal')) {
this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'none');
this.renderer.removeClass(this.rsvpModal.nativeElement, 'show');
this.renderer.addClass(document.body, 'modal-open');
}
}
showRsvpModal() {
this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'block');
this.renderer.addClass(this.rsvpModal.nativeElement, 'show');
this.renderer.removeClass(document.body, 'modal-open');
}
Html
<!--S:RSVP-->
<div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="niviteRsvpModalTitle">
</h5>
<button type="button" class="close" (click)="hideRsvpModal()" 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 bg-white text-dark"
(click)="hideRsvpModal()">Close</button>
</div>
</div>
</div>
</div>
<!--E:RSVP-->
The following code useful to open modal on openModal() function and close on closeModal() :
function openModal() {
$(document).ready(function(){
$("#myModal").modal();
});
}
function closeModal () {
$(document).ready(function(){
$("#myModal").modal('hide');
});
}
/* #myModal is the id of modal popup */
The same thing happened to me. I wanted to open the Bootstrap modal by clicking on the table rows and get more details about each row. I used a trick to do this, Which I call the virtual button! Compatible with the latest version of Bootstrap (v5.0.0-alpha2). It might be useful for others as well.
See this code snippet with preview:
https://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba
Summary:
let exampleButton = document.createElement("button");
exampleButton.classList.add("d-none");
document.body.appendChild(exampleButton);
exampleButton.dataset.toggle = "modal";
exampleButton.dataset.target = "#exampleModal";
//AddEventListener to all rows
document.querySelectorAll('#exampleTable tr').forEach(row => {
row.addEventListener('click', e => {
//Set parameteres (clone row dataset)
exampleButton.dataset.whatever = e.target.closest('tr').dataset.whatever;
//Button click simulation
//Now we can use relatedTarget
exampleButton.click();
})
});
All this is to use the relatedTarget property. (See Bootstrap docs)
Here's how you do it with ternary operator
$('#myModal').modal( variable === 'someString' ? 'show' : 'hide');