I have 2 buttons next to each other. The first opens a modal with the data-target of #myModal and the second button opens it with the data-taget of #largeModalTwo. The problem is, the first works fine but clicking the 2nd button only dims the screen, it doesn't open any modal.
this is bootstrap 4, could this be a bug with it?
here is the codepen
<div id="fullWidthContButtons">
<div class="container-fluid centerthisouter" style="margin-top: 25px;">
<div class="page-header centerthisinner centerthisouter">
<button type="button" class="btn btn-primary modalLaunch" data-toggle="modal" data-target="#myModal">
<h3 class="title">test data</h3> <i class="fa fa-external-link open-seseme" aria-hidden="true"></i> </button>
</div>
</div>
<div class="container-fluid centerthisouter" style="margin-top: 25px;">
<div class="page-header centerthisinner centerthisouter">
<button type="button" class="btn btn-primary modalLaunch" data-toggle="modal" data-target="#largeModalTwo">
<h3 class="title">test data 2</h3> <i class="fa fa-external-link open-seseme" aria-hidden="true"></i> </button>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<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">Load JSON</h4> </div>
<div class="modal-body centerthisouter">
<button type="button" class="btn btn-primary centerthisinner sm-margin" id="loadJson">Load JSON file to create table</button>
<table class="table table-striped" id="data_table" /> </div>
</div>
</div>
</div>
<div id="largeModalTwo" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> ... </div>
</div>
</div>
No bug in Bootstrap just a super minor error in your HTML. <table> properties are not self-closing in HTML, as you have in your first modal example. I think this was throwing off the modal JS from bootstrap because the element wasn't ever closed.
A minor code change in the modal body and you are good to go:
<div class="modal-body centerthisouter">
<button type="button" class="btn btn-primary centerthisinner sm-margin" id="loadJson">
Load JSON file to create table
</button>
<table class="table table-striped" id="data_table"></table>
</div>
Revised codepen:
http://codepen.io/staypuftman/pen/wzNVxP
Related
A dialog window is incorrectly opening behind another dialog window. I use the #modalMidWestEquipPlans data target to open the dialog window. How do I tweak the code so that the hyperlink opens the dialog window in front? Most solutions to a similar issue talk about tweaking a z-index but I do not have that in this code.
Thank you
<div class="col col mb-4">
<div class="card metro-card rounded mb-0 bg-primary">
<div class="card-body ">
<h5 class="card-title">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modalEquipPlans">
Equipment
</button>
</h5>
</div>
</div>
</div>
<div class="modal fade" id="modalEquipPlans" tabindex="-1" role="dialog" aria-labelledby="modalEquipPlansTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title ModalTitleOR" id="modalEquipPlansLongTitle">Equipment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<strong>Equipment Plans</strong>
<div class="list-group">
<!-- (other list group items removed) -->
<div class="list-group-item bg-danger h5 fake-btn">
<a class="clsPointer" data-toggle="modal"
data-target="#modalMidWestEquipPlans">
<span class="addUnderlines">AFTER CLICKING THIS HYPERLINK, THE DIALOG BOX OPENS BEHIND THIS DIALOG INSTEAD OF IN FRONT</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The following code doesn't show the modal on button click, on mobile devices, when the button have an inline style float rule:
<button class="aa-secondary-btn" style="float: left; width: 140px;" title="Add a new product." data-toggle="modal" data-target="#modal">Add New</button>
<!--add product modal-->
<div class="modal fade" tabindex="-1" id="modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Product</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>
</div>
</div>
<!--/add product modal-->
It's only when I remove the float rule that the modal shows. What should I do to have the button float and have the modal show on mobile devices?
By using Meshu's suggestion I solved my problem and now the modal shows. Actually, the button is clickable. Below is the solution code:
<button class="aa-secondary-btn" style="position: relative; z-index: 20;width: 140px; float: right;" title="Add a new product." data-toggle="modal" data-target="#add_prod_mod">Add New</button>
<!--add product modal-->
<div class="modal fade" tabindex="-1" id="add_prod_mod" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Product</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>
</div>
</div>
Question:
In the below sample code, we can see that each message has a unique MessageSid.
In the HTML code, I would like to set
data-target="#deleteModal" to data-target="#{{message.MessageSid}}"
and similarly
id="deleteModal" to id="{{message.MessageSid}}"
How can I do this? I would like each modal to be individual to each message.
MessageDetail Model
export class MessageDetail {
MessageSid: string;
Body: string;
Time: string;
Direction: string;
FromPhoneNumber: string;
ToPhoneNumber: string;
}
HTML code
<div id="listOfMessages" class="mt-5">
<div class="container" *ngFor="let message of messageList" [ngClass]="classDirection(message)">
<img src="/assets/img/avatar.png" alt="Avatar">
<p>{{message.Body}}</p>
<button class="btn btn-danger btn-circle btn-circle-sm m-1 float-right" data-toggle="modal" data-target="#deleteModal"><i class="fa fa-times"></i></button>
<span class="time-right">{{message.TimeCreated}}</span>
<!-- Confirm Delete Modal -->
<div class="modal fade" id="deleteModal" 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">Delete Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this message?</p>
<p>{{message.Body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="deleteMessage(message, $event)">Delete</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Confirm Delete Modal-->
</div>
</div>
I have tried this solution on my own. But it seems only Modals 1,4,7 in the list work. The ones in between do not pop up when clicked.
<div id="listOfMessages" class="mt-5">
<div class="container" *ngFor="let message of messageList" [ngClass]="classDirection(message)">
<img src="/assets/img/avatar.png" alt="Avatar">
<p>{{message.Body}}</p>
<button class="btn btn-danger btn-circle btn-circle-sm m-1 float-right" data-toggle="modal" attr.data-target="#{{message.MessageSid}}"><i class="fa fa-times"></i></button>
<span class="time-right">{{message.TimeCreated}}</span>
<!-- Confirm Delete Modal -->
<div class="modal fade" id="{{message.MessageSid}}" 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">Delete Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this message?</p>
<p>{{message.Body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="deleteMessage(message, $event)">Delete</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Confirm Delete Modal-->
</div>
</div>
You should do in the HTML:
...
<div [id]="'#' + message.messageSId"> </div>
...
Inside the tag you should do with [attr]="typeScriptExpression" (property binding), not with attr={{typeScriptExpression}} (interpolation)
Reference to study: https://angular.io/guide/template-syntax
Thank you. I figured out the issue. Some MessageSids began with numbers and apparently you cannot have a tag with an ID that begins with a number. Prefixing a character solved the issue.
A bootstrap modal in one of my sites is working perfect when i view it localy (the PDF is loading fine) but online although the modal is working the PDF is not diplayed.
Any ideas?
Thank you
<button type="button" class="btn btn-lg btn-outline" data-toggle="modal" data-target="#myModal">
<i class="fa fa-download"></i>Launch my CV
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<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">CV</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="img/cv.pdf" data-backdrop="static" data-keyboard="false">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
I created a simple HTML with bootstrap 3.2 :
<body>
<div>
<a class="btn" href="#frmLogin" data-toggle="modal">login</a>
</div>
<div class="modal fade" id="frmLogin" role="dialog">
<div class="modal-dialog">
<div class="modal-content>">
<div class="modal-header">
<a class="btn" data-dismiss="modal">×</a>
<h3 id="modalTitle">Login</h3>
</div>
</div>
</div>
</div>
</body>
but the modal does not show correctly.
fiddle link : http://jsfiddle.net/jsmLxhv9/1/
I'm a little late to the party here, but I had the same issue, which lead me to this post. The issue with the posted code is that
<div class="modal-content>">
needs to be
<div class="modal-content">
Other than that, it works fine. Check it out here: http://jsfiddle.net/hjqo17dq/
<body>
<!-- Button trigger modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">
Login
</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"><span aria-hidden="true">×</span><span class="sr-only">Close</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>
</body>