Base solution for your next web application
Open Closed

Nested modals #3720

User avatar
0
olcaolgun created

Hi,

I have a modal-component which is containing a custom control. My custom-control is a combination of "select" and "button" controls. When you click button control, a new modal is appearing to insert a new item into the selectbox. When i click the "button", new modal is apperaring inside the previous modal as it was shown below. How can i display second modal outside of the first modal's boundary?

[attachment=0:2zwda31a]modals.jpg[/attachment:2zwda31a]

Go to accepted answer
5 Answer(s)
  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    olcaolgun created

    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>
  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    olcaolgun created

    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"
  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks @olcaolgun,

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

    Thanks again.

Assignee
No one
Labels
Non yet