Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35373

Re: the definition of this

Show key headers only | View raw

Sorry, the code looks line this

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta name="viewport" content="width=device-width, initial-scale=1">
  5 <style>
  6 body {font-family: Arial, Helvetica, sans-serif;}
  7 
  8 #myImg {
  9     border-radius: 5px;
 10     cursor: pointer;
 11     transition: 0.3s;
 12 }
 13 
 14 #myImg:hover {opacity: 0.7;}
 15 
 16 /* The Modal (background) */
 17 .modal {
 18     display: none; /* Hidden by default */
 19     position: fixed; /* Stay in place */
 20     z-index: 1; /* Sit on top */
 21     padding-top: 100px; /* Location of the box */
 22     left: 0;
 23     top: 0;
 24     width: 100%; /* Full width */
 25     height: 100%; /* Full height */
 26     overflow: auto; /* Enable scroll if needed */
 27     background-color: rgb(0,0,0); /* Fallback color */
 28     background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
 29 }
 30 
 31 /* Modal Content (image) */
 32 .modal-content {
 33     margin: auto;
 34     display: block;
 35     width: 100%;
 36     max-width: 700px;
 37 }
 38 
 39 /* Caption of Modal Image */
 40 #caption {
 41     margin: auto;
 42     display: block;
 43     width: 80%;
 44     max-width: 700px;
 45     text-align: center;
 46     color: #ccc;
 47     padding: 5px 0;
 48     height: 150px;
 49 }
 50 
 51 /* Add Animation */
 52 .modal-content, #caption {
 53     -webkit-animation-name: zoom;
 54     -webkit-animation-duration: 0.6s;
 55     animation-name: zoom;
 56     animation-duration: 0.6s;
 57 }
 58 
 59 @-webkit-keyframes zoom {
 60     from {-webkit-transform:scale(0)}
 61     to {-webkit-transform:scale(1)}
 62 }
 63 
 64 @keyframes zoom {
 65     from {transform:scale(0)}
 66     to {transform:scale(1)}
 67 }
 68 
 69 /* The Close Button */
 70 .close {
 71     position: absolute;
 72     top: 15px;
 73     right: 35px;
 74     color: #f1f1f1;
 75     font-size: 40px;
 76     font-weight: bold;
 77     transition: 0.3s;
 78 }
 79 
 80 .close:hover,
 81 .close:focus {
 82     color: #bbb;
 83     text-decoration: none;
 84     cursor: pointer;
 85 }
 86 
 87 /* 100% Image Width on Smaller Screens */
 88 @media only screen and (max-width: 700px){
 89     .modal-content {
 90         width: 100%;
 91     }
 92 }
 93 </style>
 94 </head>
 95 <body>
 96 
 97 <h2>Image Modal</h2>
 98 <p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
 99 <p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attr    ibute as an image caption text inside the modal.</p>
100 
101 <img id="myImg" src="http://www.mrbrklyn.com/images/comics/action_78.jpg" alt="Action Comics" style="width:100%;max-width:300px">
102 
103 <!-- The Modal -->
104 <div id="myModal" class="modal">
105   <span class="close">&times;</span>
106   <img class="modal-content" id="img01">
107   <div id="caption"></div>
108 </div>
109 
110 <script>
111 // Get the modal
112 var modal = document.getElementById('myModal');
113 
114 // Get the image and insert it inside the modal - use its "alt" text as a caption
115 var lc_img = document.getElementById('myImg');
116 var mo = document.getElementById("img01");
117 var captionText = document.getElementById("caption");
118 lc_img.onclick = function(){
119    ¦modal.style.display = "block";
120    ¦mo.src = this.src;
121    ¦captionText.innerHTML = this.alt;
122 }
123 
124 // Get the <span> element that closes the modal
125 var span = document.getElementsByClassName("close")[0];
126 
127 // When the user clicks on <span> (x), close the modal
128 span.onclick = function() { 
129    ¦modal.style.display = "none";
130 }
131 </script>
132 
133 </body>
134 </html>

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

the definition of this ruben safir <ruben@mrbrklyn.com> - 2018-07-07 20:59 -0400
  Re: the definition of this ruben safir <ruben@mrbrklyn.com> - 2018-07-07 21:02 -0400
    Re: the definition of this Robert Heller <heller@deepsoft.com> - 2018-07-07 21:15 -0500
    Re: the definition of this JJ <jj4public@vfemail.net> - 2018-07-08 10:17 +0700
  Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 04:49 -0700
  Re: the definition of this ruben safir <ruben@mrbrklyn.com> - 2018-07-08 12:17 -0400
    Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 10:43 -0700
    Re: the definition of this Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-07-08 22:49 +0200
      Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:55 -0700
  Re: the definition of this Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-07-08 21:51 +0200
    Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:00 -0700
      Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:04 -0700
        Re: the definition of this "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-07-08 13:48 -0700
          Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:51 -0700
      Re: the definition of this "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-07-08 22:26 +0200
        Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:44 -0700

csiph-web