These pesky modals are at it again. I can get my modal to pop up but for some bizarre reason, the text in its body just doesn't show. What's the deal? Here's the modal:
<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Modal text.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Maybe it's the version of Bootstrap that you're using?
I just swapped your code out for an existing dialog on Codepen that uses Bootstrap 4.0.0 and it works:
https://codepen.io/richjava/pen/JxxyWP
<!-- basic modal -->
<!-- <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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> -->
<div id="basicModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Modal text.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I created a modal in HTML, but when i click button, i can't close popup display
enter image description here
code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-backdrop="true" data-keyboard="false">
Launch demo modal
</button>
<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">
Content
</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>
Try adding z-index for the modal-content
<div class="modal-content" style="z-index:9999">
i have created the bootstrap model and i am opening the the model on button click, Now the problem is i want to pass the object of data to that model so once the user enter the comment in the model i will get the comment as well as my object back for identification, can some one help me out with the solution
MY HTML CODE
<div class="modal" tabindex="-1" role="dialog" id="mymodal">
<div class="modal-dialog displayMainmodel" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #aeb3b7; color:White">
<h5 class="modal-title">Insert Your comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="text-align: center;">
<textarea [value]="precomment" #comment placeholder="Enter your Comment"
rows="4" cols="50"
style="resize: none; border: 1px solid #aeb3b7;width: 100%;">
</textarea>
</div>
</div>
<div class="modal-footer" style="justify-content: center; border:none">
<button type="button" class="btn btn-primary"
style="background-color: #3CB371;"
(click)="submitcomment(comment.value)">Submit</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My Ts code
openpopup(datacommentid,name){
console.log("data is",datacommentid,name)
this.data.forEach(element => {
console.log("sjdksa",element)
if(element.id==datacommentid){
this.precomment=name.comments
}
});
$('#mymodal').modal();
}
submitcomment(mycomment){
console.log("the comment is",mycomment)
}
Use shown.bs.modal event
Here is the demo: https://jsfiddle.net/chille1987/ozud4cgq/9/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 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>
$('#exampleModal').on('shown.bs.modal', function (e) {
var element = $('<div>Modal is opened</div>');
$('.modal-body').append(element);
})
I have unlimited modals starting from modal_0.
What I need is when closing one modal another is opened and not all opening together as in following code.
So how can it be solved?
$("#modal_0").on('hidden.bs.modal',function () {
for(var i = 1; i < 5; i++) {
$("#modal_"+i).modal({toggle: true, backdrop: 'static',keyboard:false,show:true});
};
});
I have made you an example with 3 modals using a recursive mechanism, hope this helps you:
$(document).ready(function()
{
startRecursiveModalOpening(0);
});
function startRecursiveModalOpening(modalID)
{
var modalOptions = {
toggle: true,
backdrop: 'static',
keyboard: false,
show: true
};
// Register listener for modal hidden event one time.
$("#modal_" + modalID)
.modal(modalOptions)
.one("hidden.bs.modal", function()
{
var nextModal = $("#modal_" + (modalID + 1));
if (nextModal.length > 0)
startRecursiveModalOpening(modalID + 1);
});
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Modal 0 -->
<div class="modal fade" id="modal_0" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
MODAL 0
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">BODY</div>
<div class="modal-footer">FOOTER</div>
</div>
</div>
</div>
<!-- Modal 1 -->
<div class="modal fade" id="modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
MODAL 1
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">BODY</div>
<div class="modal-footer">FOOTER</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="modal_2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
MODAL 2
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">BODY</div>
<div class="modal-footer">FOOTER</div>
</div>
</div>
</div>
Assuming the modal's id has 'modal_' + sequence as pattern, and that the modals should be displayed based on this sequence:
modal_0 ➝ modal_1 ➝ modal_2 ➝ and so on...
Then you could try attaching the event handler like this:
$('[id^="modal_"]').on('hidden.bs.modal', function () {
var nextId = parseInt(this.id.substring(6)) + 1;
$("#modal_"+ nextId).modal({
toggle: true,
backdrop: 'static',
keyboard:false,
show:true
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal_0">
Launch demo modal
</button>
<div id="modal_0" class="modal fade">
<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>
</button>
<h4 class="modal-title">Modal 0</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="modal_1" class="modal fade">
<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>
</button>
<h4 class="modal-title">Modal 1</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="modal_2" class="modal fade">
<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>
</button>
<h4 class="modal-title">Modal 2</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="modal_3" class="modal fade">
<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>
</button>
<h4 class="modal-title">Modal 3</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="modal_4" class="modal fade">
<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>
</button>
<h4 class="modal-title">Modal 4</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="modal_5" class="modal fade">
<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>
</button>
<h4 class="modal-title">Modal 5</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm trying to implement a bootstrap modal directive from here: DOCUMENTATION but for some reason I cannot make it work.
When I click on the button which calls the function, it shows a line over the darker background as you can see here. However you can see the template loaded in the developer tools, check the gif.
You can check my gist with the files.
Any sugestion is welcome.
The problem is in this two divs:
YOUR CODE
<div class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Login / Register</h4>
</div>
<div class="modal-body">
<p>Login Form</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button">Register</button>
<button class="btn btn-success" type="button">Login</button>
</div>
</div>
</div>
</div>
CHANGE TO THIS
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Login / Register</h4>
</div>
<div class="modal-body">
<p>Login Form</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button">Register</button>
<button class="btn btn-success" type="button">Login</button>
</div>
</div>
the <div class="modal fade"> is who dont let see the rest of the content.
The requirement-My applicaiton has a button which when clicked a modal is supposed to pop-up where there will contain some data.
Architecture-I want the modal data to be contributed from some another application(some url),through a php file.How can this be done?
What I have tried-In the php file i have placed
<?php echo ' <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>
In the html I am using this
<div id="prerequisites-container" class="container-fluid">
<a href="http://localhost/Experiment/main/prereq.php"
data-toggle="modal" data-target="#myModal" class="btn btn-default">
Launch Modal </a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"></div>
</div>
Place your HTML code, as follows:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"></div>
inside your Echo.
<?php echo ' HERE <div class="modal-dialog">
UPDATED:
<div id="prerequisites-container" class="container-fluid">
Launch Modal
</div>
<?php echo '<div class="modal fade" id="trymodalbootstrap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<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>'; ?>
place the modal html in your html, and fetch modal content data dynamically through ajax call from server. and add that data to modal before displaying