javascript - Modal BootstrapMultiple modal on one-pagemodal-open Class - Stack Overflow

admin管理员组

文章数量:1404927

I've got a serious issue with modal from Bootstrap.

When I open a modal box in my website, there's absolutly no problem (the modal-open class is correctly added on the body) the modal is correct, shade ok and content clear :

<button type="button" data-toggle="modal" data-target="#Modal_GA">
    buttonOpenMe
</button>

When I close it manualy, it's ok too :

<button type="button" class="close2" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">&times;</span>
  <p class="TxtClose">CLOSE</p>
</button>

In my first modal, I've got two others buttons to check my previous & next projects (my website is a one-page).
And this is what i want to do :

1. open modal#1
2. scroll & click on next project
3. close modal#1
4. open modal#2, etc...

<button type="button" data-dismiss="modal" data-toggle="modal" data-target="#Modal_Animations">
  CloseThis
</button>

My body had an added class called "modal-open" when a modal box is opened. But when I'm already in the first modal & I want to go into the second project (modal#2), he appears but my scroll is locked and my body lost his modal-open class.

I think data-dismiss="modal" clear everything. But when I add manually (with inspector) the class "modal-open" on my body when the second modal is opened, everything works.

So I tried to fix this with a lot a solution from forum post & nothing really works.

I think I had to look for this type of snippets for adding the class on the body automatically,
something like that :

$(document)
  .on('show.bs.modal', '.modal', function () {
    $(document.body).addClass('modal-open');
  })
  .on('hidden.bs.modal', '.modal', function () {
    $(document.body).removeClass('modal-open');
  });

But actually, everything failed, obviously!

How can I fix this?

If you want to take a look to my online test version: .php , scroll and click on the first project "Gamers Assembly 2017", then scroll and click on "Projet suivant" (next project). The bug will appear!

PS: I'm working with Bootstrap v3.3.7 (and when I paste news files, everything is broken, so for this website, I just want to stay under this version for now)

I've got a serious issue with modal from Bootstrap.

When I open a modal box in my website, there's absolutly no problem (the modal-open class is correctly added on the body) the modal is correct, shade ok and content clear :

<button type="button" data-toggle="modal" data-target="#Modal_GA">
    buttonOpenMe
</button>

When I close it manualy, it's ok too :

<button type="button" class="close2" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">&times;</span>
  <p class="TxtClose">CLOSE</p>
</button>

In my first modal, I've got two others buttons to check my previous & next projects (my website is a one-page).
And this is what i want to do :

1. open modal#1
2. scroll & click on next project
3. close modal#1
4. open modal#2, etc...

<button type="button" data-dismiss="modal" data-toggle="modal" data-target="#Modal_Animations">
  CloseThis
</button>

My body had an added class called "modal-open" when a modal box is opened. But when I'm already in the first modal & I want to go into the second project (modal#2), he appears but my scroll is locked and my body lost his modal-open class.

I think data-dismiss="modal" clear everything. But when I add manually (with inspector) the class "modal-open" on my body when the second modal is opened, everything works.

So I tried to fix this with a lot a solution from forum post & nothing really works.

I think I had to look for this type of snippets for adding the class on the body automatically,
something like that :

$(document)
  .on('show.bs.modal', '.modal', function () {
    $(document.body).addClass('modal-open');
  })
  .on('hidden.bs.modal', '.modal', function () {
    $(document.body).removeClass('modal-open');
  });

But actually, everything failed, obviously!

How can I fix this?

If you want to take a look to my online test version: http://bg-portfolio./bg_test/index.php , scroll and click on the first project "Gamers Assembly 2017", then scroll and click on "Projet suivant" (next project). The bug will appear!

PS: I'm working with Bootstrap v3.3.7 (and when I paste news files, everything is broken, so for this website, I just want to stay under this version for now)

• javascript
• html
• css
• twitter-bootstrap
• bootstrap-modal

Share Improve this question Follow edited Mar 11 at 22:51 Mister Jojo 22.6k66 gold badges2525 silver badges4444 bronze badges asked Jul 30, 2017 at 16:43 NóvaNóva 2911 gold badge11 silver badge22 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 0

Maybe could be more convenient, change a little bit the way as you show/hide your modals for each next/previous portfolio item.

<button type="button" class="close2" data-actual="#Modal_GA" data-target="#Modal_Animations">
   <span aria-hidden="true">&gt;</span><p class="TxtClose">PROJET SUIVANT</p>
</button>

Then you can use only 1 simple jquery function:

  $('.close2').click(function() {
    var actualModal = $(this).attr('data-actual');
    var newModal = $(this).attr('data-target');

    $(actualModal).modal('hide');
    $(newModal).modal('show');
  }); 

Note that you don't need any more create a script for each portfolio item, in this way you will save time load and resource for the JS in the browser.

You've added the event listeners twice:

When I view source I can see the following on lines 583 and 1046:

$(document)
.on('show.bs.modal', '.modal', function () { 
    $(document.body).addClass('modal-open') 
})
.on('hidden.bs.modal', '.modal', function () { 
    $(document.body).removeClass('modal-open') 
})

I quickly removed one of the event listeners in Chromes Inspect Tool.

Right click the button in the modal you mentioned > Inspect > Event Listeners > click > then delete one of the div#Modal_GA,modal.fade.in event listeners. The next modal now scrolled correctly for me.

I assume, therefore, that by removing one of the two duplicated blocks, you will remove this second listener, which is basically firing twice and messing up your second modal...

<h1>Bootstrap 4x multiple modals in one page</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg1">Large modal1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg2">Large modal2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg3">Large modal3</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg4">Large modal4</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg5">Large modal5</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg6">Large modal6</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg7">Large modal7</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg8">Large modal8</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg9">Large modal9</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg10">Large modal10</button>


<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
                <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>
<div class="modal fade bd-example-modal-lg1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal1</h4>
                <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>
<div class="modal fade bd-example-modal-lg2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal2</h4>
                <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>
<div class="modal fade bd-example-modal-lg3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal3</h4>
                <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>
<div class="modal fade bd-example-modal-lg4" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal4</h4>
                <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>
<div class="modal fade bd-example-modal-lg5" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal5</h4>
                <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>
<div class="modal fade bd-example-modal-lg6" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal6</h4>
                <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>
<div class="modal fade bd-example-modal-lg7" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal7</h4>
                <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>
<div class="modal fade bd-example-modal-lg8" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal8</h4>
                <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>
<div class="modal fade bd-example-modal-lg9" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal9</h4>
                <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>
<div class="modal fade bd-example-modal-lg10" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal10</h4>
                <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>

The modal-open class gets removed after the modal has finished animating closed, but added by the other modal just as it opens. Unfortunately these animations overlap. This means that the modal-open class is added by the opening modal and then quickly removed by the closing modal (as I understand it).

Hooking into the late events of the modal (specifically shown.bs.modal, which is fired when the opening animation ends) should help you here: https://getbootstrap./docs/4.0/ponents/modal/#events

$( '#modal1' ).on( 'shown.bs.modal', function(){
    document.body.classList.add( 'modal-open' );
});
$( '#modal2' ).on( 'shown.bs.modal', function(){
    document.body.classList.add( 'modal-open' );
});

Tested and working over here

本文标签： javascriptModal BootstrapMultiple modal on onepagemodalopen ClassStack Overflow