Member Avatar for 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>
Edited by Catherine King
  • 2 Contributors
  • 3 Replies
  • 1K Views
  • 59 Minutes Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Quick diagnosis and approach
The modal and page blur on load means something is opening the modal automatically (a script, a hash-based trigger, or duplicated IDs), not that the Bootstrap markup is wrong. As suggested, the trigger attributes differ by Bootstrap version; a safer pattern is to leave the grid link as a simple client trigger (add a class + a data attribute with the full text) and then use a single modal (outside the grid) that you populate and show only when the user clicks a row link.

Server-side: attach the data and a class (example for GridView RowDataBound)

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType != DataControlRowType.DataRow) return;
    var hl = e.Row.FindControl("lnkRedirect") as HyperLink;
    if (hl == null) return;
    string content = (DataBinder.Eval(e.Row.DataItem, "content") ?? "").ToString();
    hl.Text = content.Length > 11 ? content.Substring(0,11) : content;
    hl.Attributes["class"] = (hl.Attributes["class"] ?? "") + " open-grid-modal";
    hl.Attributes["data-fulltext"] = Server.HtmlEncode(content);
    hl.NavigateUrl = "javascript:void(0);";
}

Client-side: populate the modal body and show it (works with Bootstrap 4 or 5)

document.addEventListener('click', function(e){
  var t = e.target.closest('.open-grid-modal');
  if (!t) return;
  var txt = t.getAttribute('data-fulltext') || '';
  var body = document.querySelector('#myModal .modal-body');
  if (body) body.textContent = txt; // use textContent to avoid HTML injection
  if (window.bootstrap && bootstrap.Modal) {
    new bootstrap.Modal(document.getElementById('myModal')).show();
  } else if (window.jQuery && jQuery.fn.modal) {
    jQuery('#myModal').modal('show');
  }
});

Quick checklist

  • Keep the modal markup outside the repeated grid so its ID is unique.
  • Search scripts for any .modal('show') or new bootstrap.Modal(...).show() that might run on page load and remove/guard them.
  • HTML-encode stored text and inject with textContent to prevent XSS.
  • If the modal still opens on load, check for code that reacts to location.hash and remove that behavior.

This pattern cleanly separates server/data work and client UI, avoids automatic popups, and makes it easy to support both Bootstrap 4 (jQuery) and 5 (vanilla) without editing each row's markup.

Recommended Answers

All 3 Replies

Member Avatar for 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.

Member Avatar for 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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.