How to call Bootstrap modal popup on the select dropdown

In this article we discuss about How to call Bootstrap modal popup on the select dropdown

How to call Bootstrap modal popup on the select dropdown

Modal is basically a dialog box or popup window that is used to provide important information to the user or prompt user to take necessary actions before moving on. Modals are widely used to warn users for situations like session time out or to receive their final confirmation before going to perform any critical actions such as saving or deleting important data.

You can easily create very smart and flexible dialog boxes with the Bootstrap modal plugin. The following example oulines the basic structure to create a simple modal with a header, message body and the footer containing action buttons for the user.

Options

There are certain options that can be passed to modal() Bootstrap method to customize the functionality of a modal. Options can be passed via data attributes or JavaScript.

For setting the modals options via data attributes, just append the option name to data-, such as data-backdrop="static"data-keyboard="false", and so on.

NameTypeDefault ValueDescription
backdropboolean
or the string static
trueIncludes a modal-backdrop (black overlay area) element. Alternatively, you may specify static for a backdrop which doesn’t close the modal on click.
keyboardbooleantrueCloses the modal window on press of escape key.
focusbooleantruePuts the focus on the modal when initialized.
showbooleantrueShows the modal when initialized or activate.

Data attributes provide an easy way for setting the modal options, however JavaScript is the more preferable way as it prevents you from repetitive work. See the .modal(options) method in the section below to know how to set the options for modals using JavaScript.

Add to your HTML Page:

Below Code you can add any above bootstrap version 3 to call Bootstrap modal popup on the select dropdown

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<select name="type_val[]" id="type_val" onchange="openPopup()">
    <option value="1">Single</option>
    <option value="2">Double</option>
    <option value="3" data-toggle="modal" data-target="#myModal">Rivet Double</option>
</select>
<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

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

Add to your JS File:

function openPopup() {
    $("#myModal").modal();
}

Output:

modal slect
modal poup select

Also Read Bootstrap 4 Tabs and Pills Nav Component

One thought on “How to call Bootstrap modal popup on the select dropdown

Leave a Reply

Your email address will not be published. Required fields are marked *