I have a <li> which when clicking on it, I wish to open a modal before perfoming a certain action. Is this possible? As all the modal examples I found were all concerning button but I do not want to change it.

This is the code I'm using (and what I've tried so far)

Modal

    <!-- Modal -->
<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">
        Are you sure you want to Add an Iteration?
    </div>
    <div class="modal-footer">
        @using (Html.BeginForm("AddNewIteration", "Index"))
        {
            @Html.AntiForgeryToken()
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-warning">Add Iteration</button>
        }
    </div>
</div>

<li> in concern

<!-- Start of Add New Iteration -->
<li>
    <a href="#myModal" data-toggle="#myModal">
        <span class="ca-icon"><i class="fa fa-plus-square fa-3x"></i></span>
        <div class="ca-content">
            <h2 class="ca-main"> Add new Iteration</h2>
            <h3 class="ca-sub"> Add New Iteration to the Project!</h3>
        </div> <!-- End of ca-content-->
    </a>
</li> <!-- Add New Iteration -->

Thanks in advance

I have a <li> which when clicking on it, I wish to open a modal before perfoming a certain action. Is this possible? As all the modal examples I found were all concerning button but I do not want to change it.

This is the code I'm using (and what I've tried so far)

Modal

    <!-- Modal -->
<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">
        Are you sure you want to Add an Iteration?
    </div>
    <div class="modal-footer">
        @using (Html.BeginForm("AddNewIteration", "Index"))
        {
            @Html.AntiForgeryToken()
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-warning">Add Iteration</button>
        }
    </div>
</div>

<li> in concern

<!-- Start of Add New Iteration -->
<li>
    <a href="#myModal" data-toggle="#myModal">
        <span class="ca-icon"><i class="fa fa-plus-square fa-3x"></i></span>
        <div class="ca-content">
            <h2 class="ca-main"> Add new Iteration</h2>
            <h3 class="ca-sub"> Add New Iteration to the Project!</h3>
        </div> <!-- End of ca-content-->
    </a>
</li> <!-- Add New Iteration -->

Thanks in advance

• javascript
• jquery
• css
• twitter-bootstrap

1 Answer 1

No Matter, I found what I was doing wrong. Was declaring the tag wrong Had to change it to:

  <a href="#" data-toggle="modal" data-target="#myModal">