Bootstrap modal issue (not able to show the second modal) - javascript

So I have two modals which are triggered depending on the button I click
The first one is trigeered like this:
<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>
And it is built this way
<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
bla bla
<div class="modal-body">
bla bla
</div>
<div class="modal-footer">
bla bla
</div>
</div>
</div>
</div>
An the second one is called using a button:
<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
And it is built the same way:
<div class="modal fade open-dialog" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
dsfgdfg
</div>
<div class="modal-body">
sdgfsdgsd
</div>
<div class="modal-footer">
sdfds
</div>
</div>
</div>
</div>
When I open the first one, I have no issue.
But when I want to open the second one, it disappear as soon as it has appeared.
I know that:
I have to include only one js bootstrap file
My scripts have to be at the end (for the sake of page rapidity loading)
Do I miss something?

As says comment of Ubiquitous Developers Bootstrap modal issue (not able to show the second modal) you should give button type as button
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>

This is an old question, but I had the same issue and found this.
In your first modal, your div with class modal-header isn’t closed - you’re missing a </div>.
This means that the second modal will sort of be inside the first, which causes issues.
I found the issue by looking in the Elements tab of Chrome’s F12 tools, which shows issues like this well.

Related

How to work with modal window in ASP NET 6?

I have a HTML code:
<div class="container">
<div class="row">
#foreach(var post in Model)
{
<div class="col-sm-8">
<div class="row">
<div class="post-body container shadow p-3 mb-3 rounded-3">
<h2>#post.Title</h2>
<p>#post.Description</p>
<button type="button" class="show-post-btn btn btn-secondary" data-bs-toggle="modal" data-bs-target="#wholePost" onclick="return showContent()">Show post...</button>
</div>
<div class="modal fade" id="wholePost">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#post.Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>#post.Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar col-sm-4">
col2
</div>
}
</div>
I want to make that to when I click on "Show Post" button modal window is open with corresponding content. Currently, if there is two blog posts clicking on button result in displaying content from the first post even If I click on button in the second blog post.
I want to make that when I click on "Show post" in first blog post modal window opens with content from first blog post and when I click on button in the second blog post modal window open with content from second blog post.
I even don't understand where I should make this, in c# code or with javascript. Please provide me theory not a code if you could because I would like to guess on my own how to make this. Sorry in advance if there is post like that already and great thanks for your help.
You could do it on JS but need to propagate HTML with some additional info
just some concept code for example:
<button onclick="showContent(#post.Id);">Show post...</button>
...
<div class="modal fade" id="wholePost_#post.Id">
JS file
function showContent(id){
$("#wholePost_"+id).show();
}
There are probably some more ways to do it.
The way bootstrap modals work is that the data-bs-target attribute in your button needs to have the same id as the modal so that's why it keeps opening the modal for your first element.
What you need to do is give each modal its separate id, so instead of #wholePost id for all of the modals it should be like #wholePost1, #wholePost2, ... .

call Action twice in same view

enter image description hereHi I have an action that returns partial view I want to call it partial twice from view after once inside a modal and once outside the modal to fit the site to mobile. I use #html.action what actually happens is that there are events on click in partial and the js always listens only to the first and the one I put second inside a modal for example does not work. If I change their order on the page it will be reversed. Looking for a solution how to call that partial.
my code:
#Html.ActionLink("Search", "Cars")
<div class="modal fade carDetielsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-header">
<button class="close" aria-label="Close" data-dismiss="modal">
#*<span aria-hidden="true">×</span>*#
<img src="~/images/icon_X (1).png" />
</button>
</div>
<div class="modal-content">
#Html.Action("Search", "Cars")
</div>
</div>
</div>
</div>
#Html.ActionLink("Search", "Cars")

Change contents of a modal without closing it

Suppose I have a series of modals in same page opened by clicking on different pictures. 2 of them like this:
<!-- FIRST MODAL -->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title boldfont">THIS IS MODAL 1 HEADER</h3>
</div>
<div class="modal-body">
<img src="images/lorem1.jpg" class="img-responsive">
</div>
<div class="modal-footer">
<p class="modaltext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- SECOND MODAL-->
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title boldfont">THIS IS MODAL 2 HEADER</h3>
</div>
<div class="modal-body">
<img src="images/lorem2.jpg" class="img-responsive">
</div>
<div class="modal-footer">
<p class="modaltext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now after a modal is opened, to switch the next picture the user has to close the modal and click on another picture. I want the user to be able to click somewhere on the currently open modal and switch to the next modal's content without closing it.
I added the following code into footer but it looks bad since it closes the modal and animates a new one in. I just want the content to change.
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#modal2">next</button>
Any help is appreciated, thanks in advance.
Probably not the most elegant, but here's how I've managed to achieve your request plus toggling back and forth.
Add another button to the footer of Modal1
Add another button to the footer of Modal2
Add the following script to your javascript for 3
1
<button class="btn btn-primary" onclick="nextMod()">Go to Modal 2</button>
2
<button class="btn btn-primary" onclick="priorMod()">Return to Modal 1</button>
3
function nextMod() {
$("#modal2").show();
$("#modal1").hide();
}
function priorMod() {
$("#modal1").show();
$("#modal2").hide();
}
Hope this helps

Displaying Bootstrap Modal From Code Behind

I have looked at a few questions on here that are having the same issue I am having, but I can not seem to resolve my issue.
I am wanting to display a modal in certain scenarios... So I will need to show/hide based on certain scenarios. This is what I have :
ASP.NET
<div class="modal fade" id="lockUser" runat="server" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Warning</h4>
</div>
<div class="modal-body">
<p>Watch out! Your about to be locked out.</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
function openModal() {
$('#lockUser').modal('show');
}
C#
ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
I have the C# code in a click event, everything in the event fires except for the above line...
Maybe I a missing something really stupid
Any suggestions?
First thing to do is make sure that the openModal() method works. If it does, then move the script files (bootstrap.min.js, etc.) and functions from the bottom of your page to inside <head>..</head>.

Shaded bootbox dialog

I'm using bootbox to create bootstrap modals. Here is how I'm creating a sample one:
bootbox.dialog({message: "hello"});
My problem is that the rendered dialog is kind of disabled (all screen is shaded), I can't click on it and even ESC cannot make the modal disappear!
When I inspect the dialog element in the browser this is what I see:
<div class="bootbox modal fade in" tabindex="-1" role="dialog" style="display: block;" aria-hidden="false">
<div class="modal-backdrop fade in" style="height: 321px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">×</button>
<div class="bootbox-body">hello</div>
</div>
</div>
</div>
</div>
I checked with bootbox examples and it looks like it's the same CSS classes that have been used. So what's wrong here?
I've to to add the following CSS to fix the problem:
.modal-backdrop.fade.in {
z-index: 0;
}

Categories