How to open a modal popup after click of hyperlink using ASP.NET

[Catherine King]

How to display text in modal popup from the grid's cell by clicking the hyperlink
In jquery part I used window.open the code I wrote opened a new popup window so I changed it to modal popup but it loads while pageload before the click of hyperlink and blurs the entire main page so what is the code I need to change to make the process right and also displsy the modal popup after click
I have wrote my sample code here

<asp:TemplateField>
        <ItemTemplate>
        <asp:HyperLink ID="lnkRedirect" NavigateUrl="#myModal"
Text='<%#Eval("content").ToString().Length > 11 ? Eval("content").ToString().Substring(0, 11) : Eval("content").ToString()%>'runat="server" />
         </ItemTemplate>
    </asp:TemplateField>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        
        <div class="modal-content">
            <div class="modal-header">     
            </div>
            <div class="modal-body">
         <p id=modal_body></p>
                    </div>        
                  
            
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>

[Dani]

I don't have any experience with .NET, but I do have a lot of experience with Bootstrap, which is the CSS framework that we use here at DaniWeb. I'm very familiar with bootstrap modals because we use them all over this site.

If you don't want the page to get dark when the modal is opened, you can change:

<div class="modal fade" id="myModal" role="dialog">

into (Boostrap 4.x):

<div class="modal fade" id="myModal" role="dialog" data-backdrop="false">

or into (Boostrap 5.x):

<div class="modal fade" id="myModal" role="dialog" data-bs-backdrop="false">

... depending upon which version of Bootstrap you are using.

However, I'm a little confused by the other part of your question. You said the modal popup loads when the page loads, but you want it to only load when you click on a link?

I'm not seeing anything in the HTML code you provided above that would automatically load the modal when the page is opened.

However, as I mentioned, I don't know asp.net. What does the line <asp:HyperLink ID="lnkRedirect" NavigateUrl="#myModal" Text='<%#Eval("content").ToString().Length > 11 ? Eval("content").ToString().Substring(0, 11) : Eval("content").ToString()%>'runat="server" /> do?

A button that opens the modal should look like this in Bootstrap 4.x:

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

... or this in Bootstrap 5.x:

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Alternatively, you can use Javascript to open the modal, but it doesn't seem like that's what you're wanting to do.

[Catherine King]

The hyperlink part of code evaluates the cell content in the grid and to make it a hyperlinked text by clicking that i need to open a modal popup

[Dani]

Like I said, I don't know asp.net.

I am assuming right now you are dynamically generating a link that looks something like:

<a href="#myModal" id="lnkRedirect">....</a>

You need to instead be generating a link that looks something like (in Bootstrap 4.x):

<a href="#myModal" id="lnkRedirect" data-toggle="modal">....</a>

or (in Bootstrap 5.x):

<a href="#myModal" id="lnkRedirect" data-bs-toggle="modal">....</a>

I don't know the change you need to make to that line of asp.net to add the additional attribute to the HTML that gets generated.