Missed Wrapper after opening modal window

I'm not entirely what you mean here, but the only commit that touched modals between those versions is the above related issue.

Everything works as expected.

Drupal: 8.6.9;
Bootstrap: 3.17;

Click on "Launch demo modal" closes the current modal and opens up a new one.

Without data-dismiss="modal" you will see two modals opened.

But if you want only one modal to be opened than please check code below:

  <!-- Button trigger modal1 -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">
    Launch demo modal 1
  </button>

  <!-- Modal1 -->
  <div class="modal" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel1">Modal title 1</h4>
        </div>
        <div class="modal-body">
          111111

          <!-- Button trigger modal2 -->
          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2" data-dismiss="modal">
            Launch demo modal 2
          </button>

        </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>

  <!-- Button trigger modal2 -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2" data-dismiss="modal">
    Launch demo modal 2
  </button>

  <!-- Modal1 -->
  <div class="modal" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel1">Modal title 2</h4>
        </div>
        <div class="modal-body">
          2222222

          <!-- Button trigger modal1 -->
          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">
            Launch demo modal 1
          </button>

        </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>

I don't think that's what the OP is referring to...

I also too have this issue, after updating to bootstrap 3.14, the first time you open the layout, it opens as expected, after that, it gets stripped off the header and the body, and would look weird, apparently this causes the problem:

// Immediately return if the modal was already converted into a proper modal.
      if ($element.is('[data-drupal-theme="bootstrapModal"]')) {
        return;
      }

The modal content, header and body wrappers aren't being generated when opening one modal from within another. One example is in the experimental Media Library module. This is a modal example only, I know Bootstrap doesn't directly support experimental modules.

Within a Media Library widget, click "Add media" you might see something like this (Large Modal):

Close the modal then click "Browse Media". In the "Browse Media" modal there's an "add media" link at the top. Click that and the following appears:

@alexdoma as provided screenshots showing an example of the missing markup. This was introduced in #2997347: Using $.fn.dialog duplicates content when it lives in DOM.

To confirm, remove the following lines from modal.jquery.ui.bridge.js:

      // Immediately return if the modal was already converted into a proper modal.
      if ($element.is('[data-drupal-theme="bootstrapModal"]')) {
        return;
      }

Removing that code alone may not be sufficient, or correct. The title of the second modal isn't generated properly in my case.

Embedded screenshots in IS.

I'd like to hear back from the OP, @alexdoma

Sorry, but simply saying "removing this line works" doesn't really describe the actual issue at hand or what's going on. I'm going to need more details as to why removing said line "works" when this has already underwent numerous testing.

I did spend a bit of time narrowing it down as I missed comment #6 completely. It's returning early from Dialog.ensureModalStructure() if the the property data-drupal-theme="bootstrapModal" is present. Presumably that property doesn't guarantee the structure is complete.

For a lower level run down I'll need to spend a bit more time on it, but this will have to wait.

In terms of testing, it's a very specific case: clicking on a modal link within a modal to open another modal.

@alexdoma do you have anything further you can add?

I'm not sure if the cause of my issue is the same as OP, but the result seems to be the same.

1. Create an ajax modal dialog link with a `close` callback set in `data-dialog-options`.
2. Open modal, HTML container created correctly.
3. Close modal
4. Open modal again, HTML container missing.

Edited to add: Reverting back to 3.16 (from 3.19) does fix this issue.

Following up to #12, on why removing if ($element.is('[data-drupal-theme="bootstrapModal"]')) works:

1. The first time a modal is instantiated, div#drupal-modal is appended to the body. div#drupal-modal includes the attribute data-drupal-theme="bootstrapModal".
2. When the modal is dismissed, div#drupal-modal persists, but with class and element style changes which remove the modal from view. data-drupal-theme="bootstrapModal" remains on the element.
3. When a new modal is triggered, if ($element.is('[data-drupal-theme="bootstrapModal"]')) evaluates to true and the content of the modal is returned directly, without the additional bootstrapModal HTML wrappers.

Adding a patch to remove the convicted line of code temporarily, this is not a permanent solution. (For version 3.19)

Also for 3.20

I've been experiencing the same issue, the only way to fix this without using the patch @YahyaAlHamad has published is to close modal Dialog that is currently open before opening a new one. This is what I've done on the ajax callback triggered by the button that I need to open the second modal:

  public function openNewModal(array $form, FormStateInterface $form_state) {
        $response = new AjaxResponse();

        $command = new CloseModalDialogCommand();
        $response->addCommand($command);
        $response->addCommand(new OpenModalDialogCommand("Success!", 'The modal form has been submitted.', ['width' => 800]));

        return $response;
    }

I am also facing same issue in 3.21 in the Layout Builder pages(D8.8.1+ Bootstrap + Bootstrap Layouts). Header and wrapper have been removed in the second modal after closing the first one and initiate the second one in the Layout section. #20 worked for me.

#20 doesn't worked for me.

/admin/appearance/settings/bootstrap Javascript / Modals / jQuery UI Dialog Bridge / Disable works for me.

Disable works for me.

Disabling is equivalent to bypassing; it's not a fix for this issue.

Yes. I know this is just a workaround. But it could be the hotfix for others.

Dear @markcarver, you might not be able to fix it for a fee?
I ready to pay, because this feature is important to me.

I am also experiencing this issue when opening a second modal from within an existing modal. Not marking "needs review" as I believe this is a workaround and not the real fix, but don't currently have time to investigate further.

Attached is #20 rerolled for 8.x-3.23.

Good morning,
I'm using the latest version (8.x-3.23) and I have the same problem.
None of the solutions have worked for me.

Greetings and thanks