Button is not triggering modal

Bootstrap Studio Help
1

Hey all,

I have a page with a modal, and the button doesn't seems to trigger the modal for some reason.

        <button class="btn btn-warning" data-toggle="add-stock-modal" data-target="#add-stock-modal" type="submit" style="margin-top: 20px;">Add Stock</button>

    <div style="text-align: right;">
        <div id="modal-open">
            <div class="modal fade" role="dialog" tabindex="-1" id="add-stock-modal" aria-labelledby="add-stock-modal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Add a Stock</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
                        </div>
                        <div class="modal-body">
                            <form method="post" action="add_stock">
                                <div class="text-left" style="margin-top: 20px;">
                                    <span><i class="icon ion-ios-pricetags"></i>&nbsp;Stock symbol</span>
                                    <label for="stock-symbol"></label><input class="form-control" type="text" id="stock-symbol" style="margin-bottom: 12px; margin-top: 3px;" required="" autofocus="" minlength="1" />
                                </div>

                                <div class="text-left" style="margin-top: 20px;">
                                    <span><i class="fas fa-dollar-sign"></i>&nbsp;Price at purchase</span>
                                    <label for="price-at-purchase"></label><input class="form-control" type="text" id="price-at-purchase" style="margin-bottom: 12px; margin-top: 3px;" required="" minlength="1" />
                                </div>
                                <div class="text-left" style="margin-top: 20px;">
                                    <span><i class="fas fa-hashtag"></i>&nbsp;Number of shares</span><label
                                        for="num-of-shares"></label><input class="form-control" type="text" id="num-of-shares" style="margin-bottom: 12px; margin-top: 3px;" required="" minlength="1" />
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-warning" data-dismiss="modal" style="background-color: rgb(254, 109, 115); border-color: rgb(255, 255, 255); color: rgb(255, 255, 255);" type="button">Close</button>
                            <button class="btn btn-warning" data-dismiss="modal" style="border-color: rgb(255, 255, 255); color: rgb(255, 255, 255); background-color: rgb(38, 166, 154);" type="button">Add Stock</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

2

Change

 <button class="btn btn-warning" data-toggle="add-stock-modal" data-target="#add-stock-modal" type="submit" style="margin-top: 20px;">Add Stock</button>
    <div style="text-align: right;">
        <div id="modal-open">
            <div class="modal fade" role="dialog" tabindex="-1" id="add-stock-modal" 

    //to this//


    <button class="btn btn-warning" data-toggle="modal" data-target="#add-stock-modal" type="submit" style="margin-top: 20px;">Add Stock</button>
    <div style="text-align: right;">
        <div id="modal-open">
            <div class="modal fade" role="dialog" tabindex="-1" id="add-stock-modal"
3

Thanks, but it doesn't seem to work either.. :(

4

@tomeros, Twinstream's button does work for your modal code. I have tested it. If it's not working for you, you may have something else conflicting with it possibly. I would also recommend changing the button's type from "submit" to "button" as that would be more semantic use.

Saj

5

When I am previewing the page, it is working fine. But with my Flask app, it doesn't seem to work for some reason..

Maybe the head tag has something to do with it

    <head>
    <meta charset="utf-8">
    <title>Stock Manager Pro</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ABeeZee">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat+Alternates:300,400">

    <link rel="stylesheet" href="{{ url_for('static', filename='assets/fonts/fontawesome-all.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/assets/fonts/ionicons.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/assets/fonts/simple-line-icons.min.css') }}">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">


    <link rel="stylesheet" href="{{ url_for('static', filename='assets/bootstrap/css/smoothproducts.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/styles.min.css') }}">

</head>