1

I am attempting to create a modal-dialog that opens on the button click. However, when I do this the modal-dialog opens being the modal-backdrop and the screen becomes grey and unclickable. This also results in the dialog being under the header of the site.

enter image description here

I am currently using to Laravel Spark framework, however I believe this should be universal for all. This is my HTML.

<spark-tokens :tokens="tokens" :available-abilities="availableAbilities" inline-template>
    <div>
        <div>
            ...
            <button class="btn btn-danger-outline" @click="approveTokenDelete(token)">
                <i class="fa fa-times"></i>
             </button>
            ...
        </div>
        ...
        <!-- Delete Token Modal -->
        <div class="modal fade" id="modal-delete-token" tabindex="-1" role="dialog">
            <div class="modal-dialog" v-if="deletingToken">
                <div class="modal-content">
                    ...
                </div>
            </div>
        </div>
    </div>
</spark-tokens>

This is the JS that I am using to open the modal.

module.exports = {
    ...
    methods: {
        ...
        /**
         * Get user confirmation that the token should be deleted.
         */
        approveTokenDelete(token) {
            this.deletingToken = token;

            $('#modal-delete-token').modal('show');
        },
        ...
    }
};

I have seen problems similar to this being asked but none of the solutions have worked for me. I have tried moving the "modal fade" div outside of it's encompassing div (so right about the tag). This caused the dialog to not show up at all. I have attempted to change the z-index of modal-backdrop, however, I cannot find the correct file to change this in. Is there another solution to this problem? Any help you all can provide will be greatly appreciated. Thank you!

Faizan Syed
  • 483
  • 1
  • 4
  • 6
  • I think you might be overriding some properties of the `modal fade show` classes in your modal, because I've wrote a [fiddle](https://jsfiddle.net/aq9Laaew/144926/) with pure bootstrap and it's working fine. If you can post the console inspection of its css in the question maybe help us help you. – Luiz Carlos Aug 09 '18 at 22:05
  • So I added `data-backdrop="false"` to the modal fade div and that fixed the greying out issue for me. Now the only issue I have left is that the modal-dialog appears behind the main-header and not underneath is. I attempted to fix this by changing the position from fixed to relative, however doing that puts the dialog at the bottom of the page rather than at the top. Would you know how I could fix just this particular issue? – Faizan Syed Aug 09 '18 at 22:14
  • 1
    @FaizanSyed for the `z-index` question you should include this in your css files or inlined css declarations. There are numbers of ways, how you can do that, please research.... – Bart Aug 10 '18 at 00:28

0 Answers0