How to change bootstrap modal body content dynamically

How to change bootstrap modal body content dynamically - javascript

I created a bootstrap modal, I am looking for possible solution to make my modal content change dynamically.. here is my modal
<div class="modal fade" id="signupmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Sign up or log in</h4>
</div>
<div class="modal-body">
<a class="btn btn-block btn-social btn-facebook btn-lg">
<i class="fa fa-facebook"></i> Sign in with Facebook
</a>
<h4 style="text-align:center;"><b>OR</b></h4>
<a class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#loginmodal">LOG IN</a>
<a type="button" class="btn btn-link btn-md" data-toggle="modal" >Create Account</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><b>Close</b></button>
</div>
</div><!--modalcontent-->
</div><!--modaldialog-->
</div><!--modalfade -->`
when i click the log in button i want to change my modal-body content to this login form
<form>
<div class="form-group">
<label for="inputEmail">Email / Username</label>
<input class = "form-control" type="email" id="inputEmail"placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class = "form-control" type="password" id="inputPassword" placeholder="Password">
<a type="button" class="btn btn-link btn-sm">Forgot password</a>
</div>
<div class="form-group">
<a type="button" class="btn btn-info btn-md">Log in</a>
</div>
</form>
THANK YOU SO MUCH!

Just look at the code and you will know the solution .
Just remember that it is not necessary that things you don't see on browser can't be there. For example, in your case what you want to do is to click on login and code from some where else should be loaded to your modal-body div where in this case it is not necessary to do so rather then you can do what i have show in snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal-body">
<div id="initial-content">
<a class="btn btn-block btn-social btn-facebook btn-lg">
<i class="fa fa-facebook"></i> Sign in with Facebook
</a>
<h4 style="text-align:center;"><b>OR</b></h4>
<a class="btn btn-success btn-lg" onclick="$('#login-content').show();$('#initial-content').hide();">LOG IN</a>
<a class="btn btn-success btn-lg" type="button" class="btn btn-link btn-md" data-toggle="modal">Create Account</a>
</div>
<div id="login-content" style="display :none;">
<a class="btn btn-success btn-lg" onclick="$('#login-content').hide();$('#initial-content').show();$('#form-id').trigger('reset');"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i>Back</a>
<form id="form-id">
<div class="form-group">
<label for="inputEmail">Email / Username</label>
<input class="form-control" type="email" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class="form-control" type="password" id="inputPassword" placeholder="Password">
<a type="button" class="btn btn-link btn-sm">Forgot password</a>
</div>
<div class="form-group">
<a type="button" class="btn btn-info btn-md">Log in</a>
</div>
</form>
</div>
</div>
And as suggested by others use bootstrap dialog. But in that case also looking at your requirement your code will also remain same until and unless you want to show login button somewhere rather then modal-body. No doubt that plugin will make you code way more easy to understand and edit then ever before.

You can:
Put the form HTML into a Javascript variable or into a hidden div
Make a jQuery function and on click of the Login button load the output of the form HTML.

I suggest trying bootstrap-dialog, it's a great tool that simplifies the work to do for displaying dialogs.
See the Manipulating Dialog Message section for how to change your dialog content dynamically, there is a setMessage functionality:
BootstrapDialog.show({
title: 'Default Title',
message: 'Click buttons below.',
buttons: [{
label: 'Message 1',
action: function(dialog) {
dialog.setMessage('Message 1');
}
}, {
label: 'Message 2',
action: function(dialog) {
dialog.setMessage('Message 2');
}
}]
});

Related

When I click a button in navbar or other button it redirects me to a page called undefined but what I want to do is open a bootstrap modal

When I click a button in navbar or other button it redirects me to a page called undefined but what I want to do is to open a bootstrap modal
Explaining a little bit more I created a button on the page and when I put the <a> element inside the button it redirects to undefined page and I don't even have a href reference in there.
<!--button-->
<button class="au-btn au-btn-icon au-btn--blue">
<a data-toggle="modal" data-target="#uploadModal"><i class="zmdi zmdi-plus"></i>Adicionar Item</a>
</button>
<!--Modal-->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myMediulModalLabel">
<div class="modal-dialog modal-md">
<div style="color:white;background-color:#008CBA" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 style="color:white" class="modal-title" id="myModalLabel">Upload Items</h2>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" method="post" action="additems.php">
<fieldset>
<p>Name of Item:</p>
<div class="form-group">
<input class="form-control" placeholder="Name of Item" name="item_name" type="text" required>
</div>
<p>Price:</p>
<div class="form-group">
<input id="priceinput" class="form-control" placeholder="Price" name="item_price" type="text" required>
</div>
<p>Choose Image:</p>
<div class="form-group">
<input class="form-control" type="file" name="item_image" accept="image/*" required/>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-md" name="item_save">Save</button>
<button type="button" class="btn btn-danger btn-md" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>

Why do you need anchor inside button . This is the reason its not working
:-
simply replace
<button class="au-btn au-btn-icon au-btn--blue">
<a data-toggle="modal" data-target="#uploadModal"><i class="zmdi zmdi-plus"></i>Adicionar Item</a></button>
with
<button class="au-btn au-btn-icon au-btn--blue" data-toggle="modal" data-target="#uploadModal">
<i class="zmdi zmdi-plus"></i>Adicionar Item</button>

Slick slider method 'slickPrev' not firing inside bootstrap modal when input gains focus

I am using slick slider and its methods 'slickPrev' and 'slickNext' inside bootstrap modal to slide some content manually.One slide has a form and everything works perfect until form input gains focus and then I am unable to go back to previous slide using the button that triggers 'slickPrev' method.
The problem occurs only on mobile browsers, so far chrome for android.
I've tried to reproduce the problem outside of the modal but it seems the problem occurs only inside of it as you can see in this jsfiddle: https://jsfiddle.net/3x4bum5h/1/ where
$('body').on('click','.back-to-content',function(){
$('.wl-items-swipe').slick('slickPrev');
$('body').find('.modal-footer .btn-group').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button><button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>');
});
only makes the input lose focus otherwise it works as it should when no focus on input.

Ok I've found a solution.To make it work I had to remove the buttons that trigger slides from the footer and put them inside the slides.
Here is the working fiddle: https://jsfiddle.net/yjex03gf/
<div class="wl-content">
<p id="some-content">Lorem ipsum dolor sit amet.</p>
<div class="btn-group">
<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
<button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>
</div>
</div>
<div class="wl-form">
<form id="w-items-form">
<div class="form-group">
<label for="email" style="font-weight:bold;font-size:14px">Email</label>
<input type="text" class="form-control wl-email" placeholder="Email"/>
</div>
<div class="form-group">
<label for="phone" style="font-weight:bold;font-size:14px">Phone<span style="color:red">*</span></label>
<input type="tel" class="form-control wl-phone" max="15" placeholder="Phone number"/>
</div>
<div class="form-group text-center">
<button type="button" class="btn btn-wl-submit" style="font-size:14px;">Send <i class="fa fa-send"></i></button>
</div>
</form>
<div class="btn-group">
<button type="button" class="btn btn-default back-to-content" style="border-right: 2px solid #ececec;"><i class="fa fa-arrow-left"></i> Back</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
</div>
</div>

<style>
.modal{
display:block!important;
z-index:-1;
}
.modal-open .modal{
z-index:1080;
}
</style>

Bootstrap 4 input field in popover

The problem is described in title.
I have a Bootstrap 4 modal and one popover with input field with buttons.
In IE 11 everything is ok, but in Firefox input loses focus.
Popover:
$('[data-toggle="popover"]').popover({
container: "body",
sanitize: false,
content: function () {
return $("#choose-user-popover-content").html();
}
}).on('shown.bs.popover', function () {
$('#ExecutorSNPSearchStr').focus();
});
Popover html:
<div id="choose-user-popover-content" style="display: none;">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" id="ExecutorSNPSearchStr" aria-describedby="ExecutorSNPSearchStrAddon"/>
<div class="input-group-append" id="ExecutorSNPSearchStrAddon">
<button class="btn btn-sm btn-outline-info w-3" type="button">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-sm btn-outline-danger w-3" type="button">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
https://i.stack.imgur.com/rTe2q.png
Can anyone tell what is the reason for this, and how to solve this problem?
UPD: I recreated the situation in a separate html-file.
$(function () {
$('[data-toggle="popover"]').popover({
sanitize: false,
content: function () {
return $("#PopoverContent").html();
}
});
}).on('shown.bs.popover', function () {
$('#ExecutorSNPSearchStr').focus();
});
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div id="PopoverContent" style="display: none;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</section>
<section>
<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">Test modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-primary" type="button" data-toggle="popover"
data-trigger="click" data-placement="bottom" data-html="true"
data-title="Search">
<i class="fas fa-user-plus"></i>
</button>
<button class="btn btn-outline-danger" type="button">
<i class="fas fa-user-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</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>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

There is a simple mistake, you have tabindex="-1" in your modal so your input focus is removing by it.
For Bootstrap 4
MODAL + INPUT POPOVER
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content: function () {
return $("#PopoverContent").html();
}
});
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</section>
<section>
<div class="modal fade" id="exampleModal" 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">Test modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-primary" type="button" data-toggle="popover">
<i class="fas fa-user-plus"></i>
</button>
<button class="btn btn-outline-danger" type="button">
<i class="fas fa-user-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</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>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
INPUT POPOVER + INSIDE CONTENT
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'bottom',
sanitize: false,
content:
`<div id="PopoverContent">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>`
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
INPUT POPOVER + OUTSIDE CONTENT
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'bottom',
sanitize: false,
content: function() {
return $('#PopoverContent').html()
}
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
For Bootstrap 5
MODAL + INPUT POPOVER
const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content() {
return document.querySelector('#PopoverContent').innerHTML;
}
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<section>
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-html="true" data-bs-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</section>
<section>
<div class="modal fade" id="exampleModal" 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">Test modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
<button class="btn btn-outline-primary callPopover" type="button" data-bs-toggle="popover">
<i class="fas fa-user-plus"></i>
</button>
<button class="btn btn-outline-danger" type="button">
<i class="fas fa-user-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
INPUT POPOVER + INSIDE CONTENT
const popover = new bootstrap.Popover(document.querySelector('[data-toggle="popover"]'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content: `<div id="PopoverContent">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>`
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
INPUT POPOVER + OUTSIDE CONTENT
const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content() {
return document.querySelector('#PopoverContent').innerHTML;
}
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<button type="button" class="btn btn-lg btn-danger callPopover" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

Coming in late on this, but see https://github.com/twbs/bootstrap/issues/36692#issuecomment-1178261690
In short, newer Bootstrap versions more strictly enforce keeping focus inside the modal. By default, if there's a popover inside the modal, it will generate its own popover container outside of the modal itself - so because of the focus enforcement, it won't be reachable. The solution is to explicitly set the container for the popover not to be "body", but the modal (or an explicit container inside the modal).

I'm late to this thread but I am having the same problem using Bootstrap 5.
I copied the Bootstrap 5 code answer into my own files and it worked fine.
I then changed the html to include a cutdown version of my modal (minus the tabindex=1) and my popover and it still worked.
I then replaced the link to the beta version of Bootstrap 5 with a link to the latest full release and the original problem returned, it's not possible to type anything into the popover input field.
I'm including my code below in case anyone can spot an error but this fieels like a Bootstrap 5 bug.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<section>
<div id="status-form" class="card col-md-6 offset-md-1 d-none mb-2">
<div class="card-header"><h5 id="statusHeader"> Add new status</h5></div>
<div class="card-body">
<input id='popoverStatusID' type='hidden' disabled>
<input id='popoverMode' type='hidden' value='add' disabled>
<div class="mb-2 ms-2">
<input id='popoverStatusEdit' type='text' maxlength='20' class='form-control' value=''>
</div>
<span id='status-message' class='text-danger' value=''></span>
</div>
<div class="card-footer text-muted">
<div class="mt-1 ms-2 mb-2">
<button id="close-status-form" class='btn btn-default btn-sm' type='button'>
Close
</button>
<button id="submit-status-form" class='btn btn-primary btn-sm float-end' type='button'>
Submit
</button>
</div>
</div>
</div>
</section>
<section>
<div id="location-maintenance" class="modal fade" role="dialog" data-bs-backdrop="static">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="location-form"
" method="POST" action="#">
<div class="modal-header d-inline">
<h4 id="location-title" class="ms-2">Edit Location</h4>
<p id="edit-location-name" class="ms-2"></p>
</div>
<div class="col-md-6">
<div class="form-floating">
<select id="location-status-text" class="form-select mb-2" aria-label="Role" placeholder="xxx" name="RoomStatusText">
<option value="17" data-active="1">Active
</option>
<option value="18" data-active="0">Blocked
</option>
<option value="19" data-active="0">ISO
</option>
<option value="268" data-active="0" selected>Onboarding
</option>
</select>
<label class="text-muted">Status</label>
</div>
</div>
<div class="row mb-2">
<div class="col-md-2">
<button class="btn btn-primary status-maintenance" type="button" data-mode="add">Add</button>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-danger btn-delete d-none" role="button" data-bs-toggle="modal" data-bs-target="#modal-delete" title="Delete location" href="#" data-type="location">Delete...<i class="fas fa-times-circle"></i>
</a>
<div>
<button id="cancel-location-edit" type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<span id="add-message" class="text-success fw-bold"></span>
</form>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#location-maintenance">
Launch demo modal
</button>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script>
const popover = new bootstrap.Popover(document.querySelector('.status-maintenance'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content() {
return document.querySelector('#status-form').innerHTML;
}
})
</script>

Bootstrap modal pushes my jumbotron to left in chrome but not in edge?

I tried some of the ways in other questions given for bootstrap modal but I am using bootstrap 3.3.7 this shouldn't be the issue ,but I have no idea why this is happening every time I click on button my jumbotron shrinks !!Any help would be appreciated.
My html code:
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="/uploads/text.png" style="height:40px;width:40px" />
</button>
</div>
</div>
My javascript function:
function erase(){
$('#post').empty();
$('#post').html('<div class="modal fade" id="myModal1" 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" style="font-family:Pangolin">Post your text</h4>'+' </div>'+'<div class="modal-body">'+
'<div class="media "><div class="media-left"> <form action="porthome_.php" method="post" id="usrform" >'+
'<div class="form-group"><strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Write your post:</strong> <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">'+
'</div>'+
'<div class="text-right">'+
'<button type="submit" id="sub"class="btn btn-primary">POST</button>'+
'</div>'+
'</form><div class="media-body"> <h5 class="media-heading" style="color:#3369e8"></h5>'+
'</div>'+
'</div>'+
'</div>'+'<div class="modal-footer">'+
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+'</div>'+
'</div>'+'</div>'+'</div>');
}

Here you go with a solution https://jsfiddle.net/qc9dgefg/2/
erase = function(){
$('#post').empty();
$('#post').html(
`<div class="modal fade" id="myModal1" 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" style="font-family:Pangolin">Post your text</h4>
</div>
<div class="modal-body">
<div class="media">
<div class="media-left">
<form action="porthome_.php" method="post" id="usrform" >
<div class="form-group">
<strong>
<span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span>
Write your post:
</strong>
<input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">
</div>
<div class="text-right">
<button type="submit" id="sub"class="btn btn-primary">POST</button>
</div>
</form>
<div class="media-body">
<h5 class="media-heading" style="color:#3369e8"></h5>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`);
}
<link href="https://maxcdn.bootstrapcdn.com/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="http://via.placeholder.com/350x150" style="height:40px;width:40px">
</button>
</div>
</div>
</div>
You were missing one of the closing div tag.
I have added the closing div tag along with that I also formatted the dynamic HTML in JavaScript.

How to render the modal after user trigger

Currently, my modal HTML codes are located below my original template. Every time I load the page template, it will load that entire source codes included modal. Is there any way to load that modal HTML codes after the user clicks a button?
HTML
<!-- Template Codes-->
<button data-toggle="modal" data-target="#modal-content" type="button" ng-click="openModal()" class="btn btn-xs btn-default">
<i class="fa fa-pencil"></i>
</button>
<!-- My Modal-->
<div id="modal-content" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="block block-themed block-transparent remove-margin-b">
<div class="block-header bg-primary-dark">
<ul class="block-options">
<li>
<button data-dismiss="modal" type="button"><i class="si si-close"></i></button>
</li>
</ul>
<h3 class="block-title">Content</h3>
</div>
<div class="block-content block-content-full">
<!-- Some Contents-->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-sm btn-default">Close</button>
<button type="button" data-dismiss="modal" ng-click="" class="btn btn-sm btn-primary"><i class="fa fa-check"></i> Update</button>
</div>
</div>
</div>

you have two way:
1- directly call modal using inline attr:
<button data-toggle="modal" data-target="#modal-content" type="button" class="btn btn-xs btn-default" data-target="#modal-success-Public">
<i class="fa fa-pencil"></i>
</button>
2- use jQuery method:
$("#modal-content").modal("show")
for more details you can see this link

You can specify modal template in a separate html file and then do this.
<a data-toggle="modal" href="linktoyourmodaltemplate" data-target="#modal">Click me</a>

We Keep Coding

JavaScript is the programming language of the Web.

How to change bootstrap modal body content dynamically - javascript

You can: Put the form HTML into a Javascript variable or into a hidden div Make a jQuery function and on click of the Login button load the output of the form HTML.

Related

When I click a button in navbar or other button it redirects me to a page called undefined but what I want to do is open a bootstrap modal

Slick slider method 'slickPrev' not firing inside bootstrap modal when input gains focus

Bootstrap 4 input field in popover

Bootstrap modal pushes my jumbotron to left in chrome but not in edge?

How to render the modal after user trigger

Categories

Resources