Nested modals #3720

5 Answer(s)

• 

  0

  ismcagdas created 7 years ago

  Support Team

  Hi @olcaolgun,

  Which version of Aspnet Zero do you use (AngularJS, Angular 2, ASP.NET Core jQuery or MVC .x jQuery) ? Actually all projects has a similar sample for your use case.

  If you open linked accounts modal and then try to add a new linked account, a modal inside another will be displayed.

  If you provide the part of your code that you open the second modal, we can take a look at it .

  Thanks.

  Save Cancel
• 

  0

  olcaolgun created 7 years ago

  Hi,

  Thanks for your answer. I have checked the "linked accoount" modal sample and figure out the reason of the problem. but couldn't solve.

  In "linked accoount" modal, the code is working properly because second modal is not defined in a custom control. And definition of the second modal is out of the first modal's <div>.

  Your Code:

  <div bsModal #linkedAccountsModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" [config]="{keyboard: false}">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title">
                      <span>{{l("LinkedAccounts")}}</span>
                      <button class="btn btn-primary blue pull-right" (click)="manageLinkedAccounts()"><i class="fa fa-plus"></i>{{l("LinkNewAccount")}}</button>
                  </h4>
              </div>
              <div class="modal-body">
                  <div id="LinkedAccountsTable"></div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn default pull-right" (click)="close()">{{l("Close")}}</button>
              </div>
          </div>
      </div>
  </div>
  <linkAccountModal #linkAccountModal (modalSave)="getLinkedUsers()"></linkAccountModal>
  

  If it is a user control, "linkAccountModal" is defined in first modal's division "<div class="modal-body">" instead of previous code.

  In My Example Your Code Become like this and second modal is appearing inside the first modal's frame.

  <div bsModal #linkedAccountsModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" [config]="{keyboard: false}">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title">
                      <span>{{l("LinkedAccounts")}}</span>
                      <button class="btn btn-primary blue pull-right" (click)="manageLinkedAccounts()"><i class="fa fa-plus"></i>{{l("LinkNewAccount")}}</button>
                  </h4>
              </div>
              <div class="modal-body">
            <linkAccountModal #linkAccountModal (modalSave)="getLinkedUsers()"></linkAccountModal>
                  <div id="LinkedAccountsTable"></div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn default pull-right" (click)="close()">{{l("Close")}}</button>
              </div>
          </div>
      </div>
  </div>
  

  Save Cancel
• 

  0

  ismcagdas created 7 years ago

  Support Team

  Hi @olcaolgun,

  I don't know if this is possible to do with ngx-bootstrap or not. You can check it on ngx-bootstrap's github repo <a class="postlink" href="https://github.com/valor-software/ngx-bootstrap">https://github.com/valor-software/ngx-bootstrap</a>.

  Thanks.

  Save Cancel
• 

  0

  olcaolgun created 7 years ago

  Hi,

  I replaced the class definition as "modal-dialog" instead of "modal fade". It has worked fine.

  Old Code:

  <div bsModal #linkedAccountsModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"
  

  New Code:

  <div bsModal #linkedAccountsModal="bs-modal" class="modal-dialog" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"
  

  Save Cancel
• 

  0

  ismcagdas created 7 years ago

  Support Team

  Thanks @olcaolgun,

  It is really hard to find this information, I think it will be helpful for others.

  Thanks again.

  Save Cancel