0

First of all, I've seen this Close Bootstrap Modal but of some reason it's not working for me.

I have a page, where one modal is called from like this

<button type="button" @onclick="@(()=>modal.Show<LandingPageHelpPopUp>())" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Click here to get help</button>

That page's code look like this

<div class="modal-dialog" id="myModal" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
    <div class="modal-content" style="background-color:gray;">
        <div class="modal-body" style="color:black;">
            <p>Here you can observe the controlling of the curtains by others. If the queue is empty, and you'll like the control, hit this button.</p>
            <div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
                <label class="custom-close" @onclick="@(()=>modal.Show<LandingPageHelpPopUp2>())">Next page</label>
                <button class="next-button" style="margin-left:-3px;"><i class="fa fa-angle-right"></i></button>
            </div>
        </div>
    </div>
</div>
<img src="css/arrow-help.png" class="arrow-help">

From here, I'd like to see another modal. To do that, I guess I have close the first one first, in order to not create a double layer of modals - if that makes sense. That's where I have used the linked thread in the beginning, but somehow it doesn't work.

The second modal's code look like this

<div class="modal-dialog" id="myModal2" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
    <div class="modal-content" style="background-color:gray;">
        <div class="modal-body" style="color:black;">
            <p>If other users is in the queue, click here to get in line.</p>
            <div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
                <label @onclick="@(()=>modal.Show<LandingPageHelpPopUp>())">Previous page</label>
                <button class="next-button" style="margin-left:-3px;margin-top:-2px;"><i class="fa fa-angle-right"></i></button>
            </div>
        </div>
    </div>
</div>
<img src="css/arrow-help2.png" class="arrow-help2">

In my index.html I've these two scripts, that is meant to toggle the modals. That is if one modals is open, when the other one is shown, it should close.

<script>
    $(function () {
        $(".custom-close").on('click', function () {
            $('#myModal').modal('hide');
        });
    });
</script>
<script>
    $(function () {
        $(".custom-close2").on('click', function () {
            $('#myModal2').modal('hide');
        });
    });
</script>

Here's some screenshots, showing that the previous modal does not get closed, so it's just creating multiple layers of modals on top of each other. Here, Here, And here

Sorry for all the unnecessary code (styling, bad naming etc)

Doe any of you know why the previous modal is not getting closed, whenever the next is getting shown?

Palle
  • 53
  • 4
  • I know this doesn't directly answer your question, but there are plenty of Blazor Modal dialog solutions on the internet - search "Blazor Modal Dialog" - that don't use javascript. There's even one of mine. The Bootstrap Modal Dialog is a classic example of something that needs re-writing for Blazor. – MrC aka Shaun Curtis Sep 30 '21 at 17:30
  • Using jquery etc will make it more complicated. Implementing modal in blazor is very straightfoward. In your case, use two bools (showDiag1, showDiag2). And render the modals on condition if(showDiag1) { } if(showDiag2) { }. Toggle these two boolean based on the triggers (button clicks etc). – Mayur Ekbote Sep 30 '21 at 19:08
  • Thanks, I'll try to find a solution without javascript. – Palle Oct 04 '21 at 06:26
  • This solved my problem and made it much more simple: https://gist.github.com/conficient/ba98d1662c659e170ec16650acea05c8 – Palle Oct 04 '21 at 09:55

0 Answers0