Modal doesn't open in fixed FAB

Topic: Modal doesn't open in fixed FAB

yanchi pro asked 7 years ago

I want to open a modal from a fixed floating action button, but I can not open it. Enclose it with "fixed-action-btn" class, the button will not work. My Code:

    <!-- Working -->
    <a class="btn-floating btn-large red" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-plus"></i></a>
    <!-- ./ Working -->

    <!-- Not Working -->
    <div class="fixed-action-btn" style="bottom: 15px; right: 14px;">
        <a class="btn-floating btn-large red" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-plus"></i></a>
    </div>
    <!--./ Not Working -->
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5exampleModal>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!--/  Modal -->

Please tell me the solution.

Add comment

brouzoulis pro answered 7 years ago

0 0 Best answer

I have the exact same question. How can you you trigger a modal using the fixed FAB?

Add comment

yanchi pro answered 7 years ago

0 0 Best answer

I have not solved it yet. It was possible once. But, it was lame :(


    <!-- Hidden btn -->
    <div style="display:none;">
        <a id="modal-open-btn" class="btn-floating btn-large red" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-plus"></i></a>
    </div>
    <!-- ./ Hidden btn -->

    <!-- Fixed FAB -->
    <div class="fixed-action-btn" style="bottom: 15px; right: 14px;">
        <a id="fixed-fab-btn" class="btn-floating btn-large red" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-plus"></i></a>
    </div>
    <!--./ Fixed FAB -->

    <!-- Modal -->
    <!-- Look at my first post. -->
    <!--/  Modal -->

    <script type="text/javascript">
        $(function() {
            //binding Fixed FAB click event
            $('#fixed-fab-btn').on("click", function() {
                // Hidden button click!
                $('#modal-open-btn').click();
            });
        });
    </script>

Is there any other good way?

Add comment

xardonik answered 7 years ago

0 0 Best answer

I tried on mdb example page and it's work.

<script>
$('#fixed-fab-btn').click(function(){$('#exampleModal').modal('show');})
</script>

Add comment

yanchi pro answered 7 years ago

0 0 Best answer

Thanks!It's working! I have to read the manual properly :(

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

yanchi

Pro User

10Support score
1Questions 2Answers

0Snippets likes 0Snippets