How to generate a modalpopup in bootstrap when a value in a dropdown is changed?

Question

I have my javascript like this ..I am raising an event to show the modalPopup

$("#City").change(function () {
   if ( $("option:selected", $("#City")).text() == "Others") {
       alert("hi");
       showModalPopup();
   }
});


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

I am getting the alert but I am unable to see the modal popup.

And this is the html code for that popup from bootstrap example

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
    <p>One fine body…</p>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
</div>

I am new to bootstrap .Please help me out.

It's in my cshtml page. @Html.DropDownListFor(c => c.City, new[] { new SelectListItem() { Text = "", Value = "" } }, "Select a City")..the same page in which I have the popup — Bharat Bhushan, Oct 08 '13 at 06:53
did you try replacing `showModalPopup()` with `$("#myModal").modal("show");` ?? — Enrique Gil, Oct 08 '13 at 06:55
Try this one http://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery — Enrique Gil, Oct 08 '13 at 07:18

Enrique Gil · Answer 1 · 2013-10-08T07:06:52.687

1

First add Variable for your dropdown change event

$("#City").live("change", function () {
   var changeCity = "";
   changeCity =  $("#City option:selected").val();
           if ( changeCity  == "Others") {
               alert("hi");
               showModalPopup();
           }
        });


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

Hope this works :)

edited Oct 08 '13 at 07:06

answered Oct 08 '13 at 07:01

Enrique Gil

754
4
19
50

Its the problem with the usage of bootstrap.anywayz thanks for the reply...I have checked even with your edit by the way – Bharat Bhushan Oct 08 '13 at 07:11

How to generate a modalpopup in bootstrap when a value in a dropdown is changed?

1 Answers1