CODEWITHSUNDEEP
htmlasp.net-mvcbootstrap-modal
Ha66y-Day
Ha66y-Day

Reputation: 217

New to Modals and can not get modal to appear when button is selected

On this screen, a user can see all the questions from the database. Features include the ability to move the order of the question, delete, or add a question. When the user selects add I want a modal to appear. The following code will not work and is nonresponsive when I hit add. 

<div class="modal" id="addQuestion" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <h4>DemoTitle</h4>
        </div>
        <div class="modal-body">
            <p>put a lot of stuff here</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" data-dismiss="modal">close</button>
        </div>
    </div>
</div>


<div class="admin-center">

<table id="main-table" class="table table-striped table-bordered">
    <thead>
        <tr>

            <th class="select-all">
                <input type="checkbox" class="hide" id="select-all-checkbox" />
                <h3><label style="font-weight:normal;" for="select-all-checkbox">Select</label></h3>
            </th>
            <th><h4 class="nobr"><label>Position</label></h4></th>
            <th><h4 style="text-align:left;" class="nobr"><label>Question</label></h4></th>

        </tr>
    </thead>
    <tbody>
 @foreach (var question in Model.allQuestions)
        {
            <tr>
                <td><input type="checkbox" name="select" value="@question.position" /></td>
                <td>@question.position</td>
                <td style="text-align:left;">@question.question</td>
            </tr>
        }

</tbody>
</table>
<br />
<br />
<div class="admin-center">
    <button id="btnUp" class="btn btn-lg btn-primary">Move Up</button>
    <button id="btnDown" class="btn btn-lg btn-primary">Move Down</button>
</div>
<br />
<div class="admin-center">
    <a class="btn btn-lg btn-primary" data-toggle="#addQuestion">Add Questions</a>
    <a class="btn btn-lg btn-primary">Delete Question</a>
</div>

Upvotes: 0

Views: 53

Answers (2)

Shyju
Shyju

Reputation: 218732

#addQuestion Should be the value of data-target attribute. Also data-toggle attribute should have a value of modal

This should work

<a class="btn btn-lg btn-primary" data-toggle="modal"
                                  data-target="#addQuestion">Add Questions</a>

Assuming you have properly loaded the needed JavaScript files(bootstrap) and you do not have any other script errors in the page which is preventing the script needed for modal dialog to work properly.(You can verify this in console tab of your F12 dev tools)

Here is a working JSFiddle for you to refer http://jsbin.com/neyixukuzu/edit?html,console,output

Upvotes: 2

hamed hossani
hamed hossani

Reputation: 1002

please add two attribute to your a link

data-toggle="modal" data-target="#addQuestion"

Upvotes: 1

Related Questions