All geek questions in one place

Open a modal dialog box containing dynamic data by clicking a table cell.

I am trying to achieve what the name says. Currently, I can display the contents of a <div> using:

 document.write("<table><tr>"); ... document.write("<td onclick=\"window.location.href='#popup'\" ... >" + name + "\"</td>);

With a <div> defined as: (where I'm trying to use data-name )

 <div id="popup" data-name="name" class="dialog"> <a href="#close"><img src="..." alt="..." width="166" height="104" align="left" /></a> <p> Hello (dynamic name here)! </p> </div>

I tried calling instead:

 document.write("<td onclick=\"popup(" + name + ")\" class=\"programme\">" + name + "</td>"); function popup(movieName) { var pop = document.getElementById("popup"); pop.setAttribute("data-movie", movieName); document.location.href = "#popup"; };

but I no longer see the popup this way.

Ultimately, I want popup to be a modal dialog box that will appear on top of the table. Currently, as stated above, the table simply pops the table when displayed.

Edit: Thanks for the fantastic help. And @carlosHT and @TimeDead. Both solutions work, and both taught me a lot. I went for a carlosHT solution as this is a smaller implementation. The only addition I had to add:

 .ui-dialog { clear: both; }

This stops the dialog box with a very high title.

+5
source share
2 answers

Here's an alternative using jQuery and jQueryUI:

 <html> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"/> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <style> #popup{ display: none; border: 1px solid black; } .cell-which-triggers-popup{ cursor: pointer; } .cell-which-triggers-popup:hover{ background-color: yellow; } </style> </head> <body> <div id="popup" class="dialog"> <a href="#close"><img src="http://bit.ly/1qAuZh3" alt="..." width="166" height="104" align="left"/></a> <p></p> </div> <table border="1"> <tr> <td class="cell-which-triggers-popup">exampleName</td> </tr> </table> </body> </html> <script> $( document ).ready(function() { $(document).on("click", ".cell-which-triggers-popup", function(event){ var cell_value = $(event.target).text(); showPopup(cell_value) }); function showPopup(your_variable){ $("#popup").dialog({ width: 500, height: 300, open: function(){ $(this).find("p").html("Hello " + your_variable) } }); } }); </script>

EXAMPLE: http://jsfiddle.net/xaqtawog/1/

+3
source

You can achieve this also without jQuery-UI (since at that time it did not work for me, although I am slowly moving to it)

You can make modal work with jQuery, and JS like this: (Name your css from an external file, so that the style is modal)

Setting the function literal in a file:

 (function($) { }(jQuery)

In our fucntion literature, we will create it modal (this will also add JS to CSS, which you can manually install anywhere, this is for example)

set default parameters and perform our other functions:

 $.fn.siteModal = function(prop) { options = $.extend({ height: "500", width: "500", title: "default modal box", description: "This is a place holder Modal to put in our things into.", top: "20%", left: "30%", }, prop); }; return( add_block_page(), add_popup_box(), $('.modalBox').fadeIn() ); return this; };

This guy is going to set some default parameters that our modal will use, so that he knows what size and how to display.

Now we set up the functions of our builder

 function add_block_page() { var block_page = $('<div class="blockPage"></div>'); $(block_page).appendTo('body'); }

this guy here is going to create a new div that will create a slightly transparent black overlay on the web page for our modal background, and then add it to the body so that it can be displayed.

Now we will add the popup modal itself:

 function add_popup_box() { var pop_up = $('<div class="modalBox"><a href="#" class="closeModal">X</a><div class="innerModal"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>'); $(pop_up).appendTo('.blockPage'); $('.closeModal').click(function() { $('.blockPage').fadeOut().remove(); $(this).parent().fadeOut().remove(); }); }

This guy is going to create our divs for the modal (the outer and then the inner div, the inner will contain our content), this also sets up our X button, so when you press X, the modal will close and return you to the web page correctly.

My HTML looks something like this:

 <a href="#" onclick="$.fn.siteModal(this)" class="termsLink">Terms</a>

So, now that the "terms" link is clicked, a new modal will open! (as I now call modal)

This is a very easy way to do this, and again you need to create your styles inside external css if you want, or you can add jssery css when it creates this modal. The choice is yours. Hope this helps.

EDIT

I have a CSS function that creates the look of our modal window, you can drop this guy there:

 function add_styles() { /*Block page overlay*/ var pageHeight = $(document).height(); var pageWidth = $(window).width(); $('.blockPage').css({ 'position': 'absolute', 'top': '0', 'left': '0', 'background-color': 'rgba(0,0,0,0.6)', 'height': pageHeight, 'width': pageWidth, 'z-index': '10' }); $('.modalBox').css({ 'position': 'absolute', 'left': options.left, 'top': options.top, 'display': 'none', 'height': options.height + 'px', 'width': options.width + 'px', 'border': '1px solid #fff', 'box-shadow': '0px 2px 7px #292929', '-moz-box-shadow': '0px 2px 7px #292929', '-webkit-box-shadow': '0px 2px 7px #292929', 'border-radius': '10px', '-moz-border-radius': '10px', '-webkit-border-radius': '10px', 'background': '#f2f2f2', 'z-index': '50', }); $('.innerModal').css({ 'background-color': '#fff', 'height': (options.height - 50) + 'px', 'width': (options.width - 50) + 'px', 'padding': '10px', 'margin': '15px', 'border-radius': '10px', 'color' : '#5a5a5a', 'text-align' : 'center', '-moz-border-radius': '10px', '-webkit-border-radius': '10px' }); }

And put this in your calls to the prop function: add_styles()

+3
source

Source: https://habr.com/ru/post/1206570/

More articles:


All Articles