All geek questions in one place

Simplemodal Click to show image?

I have been working on this for about ten hours, and I'm no closer to the grokking method than when I started. None of the examples at http://www.ericmmartin.com/projects/simplemodal seem to affect this task in terms and HTML that are familiar to me. My test page: http://chesstao.com/test.php

I think I followed the instructions and tried:

<!DOCTYPE html> <html lang="en"> <head><title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="../css/demo.css" rel="stylesheet" /> <link href="../css/basic.css" rel="stylesheet" /> <link href="../css/gallery.css" rel="stylesheet" /> </head><body> <div><a href="images/aveskulov-large.jpg" id="sample"> click me </a></div> <!--jQuery--> <script src="http://code.jquery.com/jquery-latest.pack.js"></script> <script src="js/jquery.simplemodal-1.4.1-min.js"></script> <script src="js/basic-min.js"></script> <script src="js/gallery-min.js"></script> <script>$("#sample").modal({opacity:80,overlayCss: {backgroundColor:"#fff"}});</script> </body></html>

But the results were bad. I would really like to know what a simple solution I am missing!

0
source share
2 answers

If your problem is that opening the image in a new window is probably due to the fact that href has clicked on me. It will not load other code, just go directly to href. Try to make the image into an html img tag, configure it to display it, and then clicking on any element makes it modal and blocks the display.

I do not know if the latest version of your page was what you tried, but if it was, there were several errors that prevented it from working. But it gets what you want. I'm sure you can work it out to make it do and see how you want, but this is what I did to make it work.

 $(document).ready(function() { $("#sample").click(function(){ $.modal("<img src=\"test.php_files/aveskulov-large.jpg\" style=\"\"/>"); }); });

Also, if you do, you need to remove the img html tag so that it exists only in this modal. Goodluck with the rest. Postscript, if you don't have firebug, get its firefox plugin and it would say that you had a syntax error.

+1
source

Try setting a simple modal mode when the DOM is fully loaded:

 <script> $(document.ready(function() { $("#sample").modal({opacity:80,overlayCss: {backgroundColor:"#fff"}}); }); </script>
+1
source

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

More articles:


All Articles