Modal doesn't open in fixed FAB


Topic: Modal doesn't open in fixed FAB

yanchi pro asked 8 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.

brouzoulis pro answered 8 years ago

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

yanchi pro answered 8 years ago

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?

xardonik answered 8 years ago

I tried on mdb example page and it's work.
<script>
$('#fixed-fab-btn').click(function(){$('#exampleModal').modal('show');})
</script>

yanchi pro answered 8 years ago

Thanks!It's working! I have to read the manual properly :(
Please insert min. 20 characters.

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