Bootstrap 5 Modal Doesn't Show with Fade Class - modal-dialog

When I add the fade class to my Bootstrap 5 modal, it doesn't show. If I remove the class, the dialog shows but the body isn't greyed out nor does the modal animate. My HTML is:
<div class="modal fade" tabindex="-1" id="forgot_block" aria-labelledby="label-forgot_block" aria-hidden="true">
<div class="modal-dialog " style="border-radius: 10px;">
<div class="modal-content">
<div class="modal-header ui-widget-header">
<h5 class="modal-title" id="label-forgot_block">Forgot Password</h5>
</div>
<div class="modal-body">
<b>Please enter your email address below and a new temporary password will be sent to you.</b>
<table>
<tr>
<input type="text" name="current_email" id="current_email" placeholder="email address" size="40" onkeyup="checkKey(event,'sendPassword_exec'">
</tr>
</table>
<div id="dialog_alert-forgot_block">
</div>
</div>
<div class="modal-footer" id="dialog_buttons_box-forgot_block"></div>
</div>
</div>
</div>
To show the modal, my JS code is:
var modal = $("#forgot_block").modal();
modal.show();
I'm sure I'm missing something simple.

It seems you have combined Bootstrap 4 and Bootstrap 5 syntax. You have to decide:
Bootstrap 4 syntax:
var modal = $("#forgot_block").modal()
modal.modal('show');
Bootstrap 5 syntax:
var myModal = new bootstrap.Modal(document.getElementById('forgot_block'))
myModal.show();
Maybe I should have written jQuery and vanilla JS syntax, but you get the point.
Also, in your code you are missing 1 parenthesis in checkKey call between closing quotation marks'", it should be onkeyup="checkKey(event,'sendPassword_exec')"
After these changes the code works for me - modal fades in from top of the screen

Related

Accordion open next on button click

Hi been searching for few days now but couldnt find anything. I have an accordion that has three accordion group, I have added a button to open the next accordion but cant seem to get it working. Can some one please help. here is what I have so far
<accordion [closeOthers]="true" style="margin-top:5px;">
<accordion-group *ngFor="let registration of registrationArray; let i = index" #groupval style="margin-top:5px;" [isOpen]="registration.isAccordionOpen">
<div accordion-heading style="width:100%;">
Registrant No. {{i + 1}}
<i class="pull-right float-xs-right glyphicon"
[ngClass]="{'glyphicon-chevron-down': groupval?.isOpen, 'glyphicon-chevron-up': !groupval?.isOpen}"></i>
</div>
<form [formGroup]="myGroup" (ngSubmit)="gotoAddons(myDetails)">
<div formArrayName="myDetails">
<div class="panel-body" [formGroupName]="i">
<div style="padding-top:20px;clear:both;">
<div style="width:100%;background-color:#578ebe;border: 1px solid #7ca7cc;">
Your Address
</div>
<div style="padding-top:30px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Address Line 1</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input autofocus class="form-control" type="text" id="address" name="address" formControlName="address" required>
<div *ngIf="myGroup.controls.myDetails.controls[i].controls.address.errors && (myGroup.controls.myDetails.controls[i].controls.address.dirty || myGroup.controls.myDetails.controls[i].controls.address.touched || submitted)" class="alert alert-danger">
<div [hidden]="!myGroup.controls.myDetails.controls[i].controls.address.errors.required">
Address Line 1 is required!
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;" *ngIf="i < registrationArray.length - 1">
<div style="float:right;">
<button (click)="groupval.isOpen = !groupval.isOpen" class="btn green">Open next tab</button>
</div>
</div>
<div style="width:100%;" *ngIf="i == registrationArray.length - 1" >
<div style="float:right;">
<button type="submit" class="btn green">Continue</button>
</div>
</div>
</div>
</div>
</form>
</accordion-group>
</accordion>
Removed some code for clarification. Can some one please let me know how I can open the next accordion group on the button click. Thanks in advance
Here is a working example
plunkr
stackblitz link
stackblitz
In your case I see that you're actually just closing the opened panel and that's all. Along with this you need to open a next panel which can be done by setting its isOpen property to true.
A small plunkr with test implementation - https://stackblitz.com/edit/ngx-bootstrap-ifmpph?file=app/app.component.html

form renderedred into modal didn't work well

I'm developing an application with symfony3. I'm using material design to customize my twig templates.
So in one of my templates, I have a hidden modal in which I'm rendering a form having a text and a select fields.
My problem is that select field didn't show the options that could be showed and that only in the modal.(if the form is rendered outside the modal it works well the problem exists when the form is rendered into the modal)
This is the link who let me open the modal :
<div class="uk-width-medium-1-3">
<div class="parsley-row"
style="padding-top: 22px;"
>
<div class="uk-input-group">
<a data-uk-modal="{target:'#modal-ajouterRue'}"><i class="material-icons md-24"></i>
</a>
</div>
</div>
</div>
This is the modal:
<div class="uk-modal" id="modal-ajouterRue">
<div class="uk-modal-dialog">
<button type="button" class="uk-modal-close uk-close"></button>
<div class="uk-modal-header"><h2>Ajouter une Rue</h2></div>
{{ render(controller("GeoTunisieBundle:Rue:new")) }}
<div class="uk-modal-footer uk-text-left">
<button type="button" class="md-btn md-btn-primary" onclick="newRue()">Save</button>
</div>
</div>
</div>
What do I have to do?

AngularStrap modal inside modal

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>

Bootstrap - Keeping buttons and search box aligned

I've searched and can't find a problem similar to mine, where it's partially responsive. I have a footer with 3 buttons and a search box. I'd like for them to be aligned and spaced evenly apart, which I've got figured out. When I reduce the screen size, the buttons are responsive and stack correctly. But the search box is aligning to the left instead of centering with the buttons. Can anyone help? I had to define a width for the search box in order to keep it cosmetically similar to the buttons. I think maybe that's the problem? Please help! Here's my fiddle: http://jsfiddle.net/kEtr9/.
<footer>
<div class="container">
<div class="row navbar-inverse navbar-justified navbar-fixed-bottom row-fluid">
<!-- replaced this with above: <div class="row"> -->
<div class="col-sm-12 text-center"><!-- centers buttons when screen -->
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i> submit bugs</button></li>
<li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i>Feature Requests</button></li>
<li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i>Contact</button></li>
<li>
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" style="width: 160px" class="form-control input-sm search-query" placeholder="Search">
<button type="submit" class="btn btn-xs" tabindex="-1">Go!</button>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</footer>
This worked for me :-)
<input type="text" style="width: 160px; margin: 0 auto; margin-bottom: 10px;" class="form-control input-sm search-query" placeholder="Search">

bootstrap 3 modal in meteor not showing

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");
}
};
}