locked
Popup a bootstrap modal RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1007168572 posted

    Hi all

    how to I can popup a model for each selected item in mvc dropdown

    Thursday, June 7, 2018 6:28 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-369506445 posted

    hi

    please try below code :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script>
    $(function () {
        $('select').on('change', function() {
            if (this.value == "Model 1") {
                $('#myModal1').modal('show');
            }
            else if (this.value == "Model 2") {
                $('#myModal2').modal('show');
            }
        });
    })
</script>
<select>
    <option>Select a item</option>
    <option>Model 1</option>
    <option>Model 2</option>
</select>




<!-- The Modal1 -->
<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading 1</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>



<!-- The Modal2 -->
<div class="modal" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading 2</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 7, 2018 6:44 AM