Bootstrap modal - popup window not showing

Question

I am using following example http://www.bootply.com/59864

But when I click on the button which triggers the pop up, background gets darker but window doesn't show. Any idea what's causing this? I am using bootstrap 3.2.0

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="CreateWorkbook.aspx.cs" Inherits="CreateWorkbook" %>
<asp:Content ID="Content0" ContentPlaceHolderID="head" runat="Server">
    <script>
        $(function () {
            $('#myFormSubmit').click(function (e) {
                e.preventDefault();
                alert($('#myField').val());
                /*
                $.post('http://path/to/post', 
                $('#myForm').serialize(), 
                function(data, status, xhr){
                // do something here with response;
                });
                */
            });
        });
    </script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

      
            <div class="row">
                <div class="col-md-12 col-xs-12" style="margin-top: 10px">
                    <a data-toggle="modal" href="#myModal" role="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-plus-sign">
                    </span>Add questions</a>
                </div>
            </div>
      <div class="list-group col-md-8" style="margin-top:20px"> <a href="#" class="list-group-item active"> Questions list </a> <a href="#" class="list-group-item list-group-item-info">Q1: Name</a> <a href="#" class="list-group-item list-group-item-info">Q2: Location</a> <a href="#" class="list-group-item list-group-item-info">Q3: Outcome</a> <a href="#" class="list-group-item list-group-item-info">Q4: Next meeting date</a> </div>
      <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">
  <form id="myForm" method="post">
          <input type="hidden" value="hello" id="myField">
      <button id="myFormSubmit" type="submit">Submit</button>
  </form>
 </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>
</div>
</asp:Content>

Your example is based on Bootstrap 2.3.1, here it is one for Bootstrap 3.3.0 http://www.bootply.com/va3EnHE0MJ — Leandro Carracedo, Dec 17 '14 at 23:31
It is working! can you please post your comment as the answer so I can accept it. — ChaturaM, Dec 17 '14 at 23:36

score 3 · Accepted Answer · answered Dec 17 '14 at 23:51

3

The working example is based on Bootstrap 2.3.1, if you are importing Bootstrap 3.3.0, then a working example could be: http://bootply.com/va3EnHE0MJ

answered Dec 17 '14 at 23:51

Leandro Carracedo

7,233
2
44
50

1

one more question. since I am using this pop up in asp.net, when I click save button it should fire the click event. But it doesn't work. Any ideas? – ChaturaM Dec 18 '14 at 00:35
Try using a button type="button" onclick="yourjsfunc();" and then code the form submit in that js function. – Leandro Carracedo Dec 18 '14 at 01:08
1

thanks mate! I found out another way. In asp.net you have to use UseSubmitBehavior="false" in your asp:Button. Then your onClick method function in the codebehind file is called. – ChaturaM Dec 18 '14 at 01:10

Bootstrap modal - popup window not showing

1 Answers1

Linked