How to open a model on click of an anchor tag?

0
votes

I'm trying to display a modal on the click of an anchor tag. I have dynamically created anchor tags (within a table and divs), on click of which a modal should be displayed...

<a href = "#close" class='forum-title' name = "abc">XYZ</a>

I've given the "#close" randomly (to prevent it from throwing an error..guessing it's(href) not imp in this case...)

I have given a simple function on the click function of the anchor tag :

function openModal() {
            $('#usermodal').modal('show');
              }

Please check my JSFiddle : http://jsfiddle.net/AshleyR098/xaqtawog/623/

UPDATE :

JSFiddle : http://jsfiddle.net/AshleyR098/xaqtawog/628

-Had given wrong ID to the modal div, tried giving onclick on the anchor tag...Still, no go...

4
jquerymodal-dialog

4 Answers

2
votes

you can try this http://jsfiddle.net/xaqtawog/637/

<a href = "#close" class='forum-title' name = "abc" data-toggle="modal" data-target="#usermodal">XYZ</a>
1
votes

You can declare your function in window context and use onclick attribute :

Javascript :

function openModal() {
        $('#usermodal').modal('show');
 }

HTML:

<a href = "#close" class='forum-title' name = "abc" onclick="openModal();">XYZ</a>
0
votes

In your JS Fiddler, I saw that you are calling openDialog function like this:

 $('#<%=abc%>').click(function()
    {
           function openModal() {
             $('#usermodal').modal('show');
            }

    });

Can you please remove openModal function declaration like this:

 $('#<%=abc%>').click(function()
    {
            $('#usermodal').modal('show');

     });
0
votes

Could you not just do this?

<a data-toggle="modal" data-target="#modal" class="btn btn-sm btn-neutral">Open Modal</a>