Bootstrap 3.3.7点击

时间:2018-03-07 20:57:06

标签: html css bootstrap-modal

当我点击指向模态ID的按钮时,它会打开页面上的所有其他模态。主要的想法是,当用户点击按钮时,它会打开专用于该按钮的模式。

相反,它会打开所有这些,我必须单独关闭每个。我可能会遗漏一些明显的东西,因为我对Bootstrap很新,但到目前为止我似乎无法找到问题。

我的理解是在data-target:___中我应该把我要提出的模态的ID ...

            <div class="row">
            <div class="col-lg-4 infoCol">
                <div class="thumbnail">
                    <img src="http://placehold.it/500x300" alt="Mercury Info">  
                    <div class="planetText caption">
                        <h4 class="text-center">Mercury</h4>
                        <div class="row">
                            <div class="col-lg-6 text-center textInfo">
                                <dd>
                                    <dt>Orbital Period:</dt>
                                    <dl>88 days</dl>
                                    <dt>Rotational Period:</dt>
                                    <dl>59 days</dl>
                                    <dt>Min Temperature:</dt>
                                    <dl>-170 &#176;C (nightside)</dl>
                                    <dt>Max Temperature:</dt>
                                    <dl>430 &#176;C (dayside)</dl>
                                    <dt>Atmosphere:</dt>
                                    <dl>Trace</dl>
                                </dd>
                            </div>
                            <div class="col-lg-6 text-center textInfo">
                                <dd>
                                    <dt>Diameter:</dt>
                                    <dl>4880 km</dl>
                                    <dt>Mass:</dt>
                                    <dl>0.05527 M<sub>E</sub></dl>
                                    <dt>Equatorial Radius:</dt>
                                    <dl>0.3826 R<sub>E</sub></dl>
                                    <dt>Semimajor Axis:</dt>
                                    <dl>0.3870993 AU</dl>
                                    <dt>Solar Day:</dt>
                                    <dl>176 days</dl>
                                </dd>
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type= "button" data-toggle="modal" data-target="#mercuryMod" class="btn btn-info btn-lg buttonInfo">More info</button>
                    </div>
                    <div id="mercuryMod" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h3 class="modal-title">Earth</h3>
                            </div>
                            <div class="modal-body">
                                <p>Mercury is the smallest and innermost planet in the Solar System. Its orbital period around the Sun of 87.97 days is the shortest of all the planets in the Solar System. It is named after the Roman deity Mercury, the messenger of the gods.
                                </br></br>
                                Like Venus, Mercury orbits the Sun within Earth's orbit as an inferior planet, and never exceeds 28° away from the Sun. When viewed from Earth, this proximity to the Sun means the planet can only be seen near the western or eastern horizon during the early evening or early morning. At this time it may appear as a bright star-like object, but is often far more difficult to observe than Venus. The planet telescopically displays the complete range of phases, similar to Venus and the Moon, as it moves in its inner orbit relative to Earth, which reoccurs over the so-called synodic period approximately every 116 days.
                                </br></br>
                                Mercury is gravitationally locked with the Sun in a 3:2 spin-orbit resonance, and rotates in a way that is unique in the Solar System. As seen relative to the fixed stars, it rotates on its axis exactly three times for every two revolutions it makes around the Sun. As seen from the Sun, in a frame of reference that rotates with the orbital motion, it appears to rotate only once every two Mercurian years. An observer on Mercury would therefore see only one day every two years.
                                </br></br>
                                Mercury's axis has the smallest tilt of any of the Solar System's planets (about ​1⁄30 degree). Its orbital eccentricity is the largest of all known planets in the Solar System;[b] at perihelion, Mercury's distance from the Sun is only about two-thirds (or 66%) of its distance at aphelion. Mercury's surface appears heavily cratered and is similar in appearance to the Moon's, indicating that it has been geologically inactive for billions of years. Having almost no atmosphere to retain heat, it has surface temperatures that vary diurnally more than on any other planet in the Solar System, ranging from 100 K (−173 °C; −280 °F) at night to 700 K (427 °C; 800 °F) during the day across the equatorial regions. The polar regions are constantly below 180 K (−93 °C; −136 °F). The planet has no known natural satellites.
                                </br></br>
                                Two spacecraft have visited Mercury: Mariner 10 flew by in 1974 and 1975; and MESSENGER, launched in 2004, orbited Mercury over 4,000 times in four years before exhausting its fuel and crashing into the planet's surface on April 30, 2015.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 infoCol">
                <div class="thumbnail">
                    <img src="http://placehold.it/500x300" alt="Venus Info">    
                    <div class="planetText caption">
                        <h4 class="text-center">Venus</h4>
                        <div class="row">
                            <div class="col-lg-6 text-center textInfo">
                                <dd>
                                    <dt>Orbital Period:</dt>
                                    <dl>224 days</dl>
                                    <dt>Rotational Period:</dt>
                                    <dl>243 days</dl>
                                    <dt>Min Temperature:</dt>
                                    <dl>465 &#176;C (nightside)</dl>
                                    <dt>Max Temperature:</dt>
                                    <dl>465 &#176;C (dayside)</dl>
                                    <dt>Atmosphere:</dt>
                                    <dl>CO2, N2</dl>
                                </dd>
                            </div>
                            <div class="col-lg-6 text-center textInfo">
                                <dd>
                                    <dt>Diameter:</dt>
                                    <dl>12 104 km</dl>
                                    <dt>Mass:</dt>
                                    <dl>0.815 M<sub>E</sub></dl>
                                    <dt>Equatorial Radius:</dt>
                                    <dl>0.9488498 R<sub>E</sub></dl>
                                    <dt>Semimajor Axis:</dt>
                                    <dl>0.723336 AU</dl>
                                    <dt>Solar Day:</dt>
                                    <dl>116 days</dl>
                                </dd>
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type= "button" data-toggle="modal" data-target="#venusMod" class="btn btn-info btn-lg buttonInfo">More info</button>
                    </div>
                    <div id="venusMod" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h3 class="modal-title">Venus</h3>
                            </div>
                            <div class="modal-body">
                                <p>Venus is the second planet from the Sun, orbiting it every 224.7 Earth days. It has the longest rotation period (243 days) of any planet in the Solar System and rotates in the opposite direction to most other planets. It does not have any natural satellites. It is named after the Roman goddess of love and beauty. It is the second-brightest natural object in the night sky after the Moon, reaching an apparent magnitude of −4.6 – bright enough to cast shadows at night and, rarely, visible to the naked eye in broad daylight. Orbiting within Earth's orbit, Venus is an inferior planet and never appears to venture far from the Sun; its maximum angular distance from the Sun (elongation) is 47.8°.
                                </br></br>
                                Venus is a terrestrial planet and is sometimes called Earth's "sister planet" because of their similar size, mass, proximity to the Sun, and bulk composition. It is radically different from Earth in other respects. It has the densest atmosphere of the four terrestrial planets, consisting of more than 96% carbon dioxide. The atmospheric pressure at the planet's surface is 92 times that of Earth, or roughly the pressure found 900 m (3,000 ft) underwater on Earth. Venus is by far the hottest planet in the Solar System, with a mean surface temperature of 735 K (462 °C; 863 °F), even though Mercury is closer to the Sun. Venus is shrouded by an opaque layer of highly reflective clouds of sulfuric acid, preventing its surface from being seen from space in visible light. It may have had water oceans in the past, but these would have vaporized as the temperature rose due to a runaway greenhouse effect. The water has probably photodissociated, and the free hydrogen has been swept into interplanetary space by the solar wind because of the lack of a planetary magnetic field. Venus's surface is a dry desertscape interspersed with slab-like rocks and is periodically resurfaced by volcanism.
                                </br></br>
                                As one of the brightest objects in the sky, Venus has been a major fixture in human culture for as long as records have existed. It has been made sacred to gods of many cultures, and has been a prime inspiration for writers and poets as the "morning star" and "evening star". Venus was the first planet to have its motions plotted across the sky, as early as the second millennium BC.
                                </br></br>
                                As the closest planet to Earth, Venus has been a prime target for early interplanetary exploration. It was the first planet beyond Earth visited by a spacecraft (Mariner 2 in 1962), and the first to be successfully landed on (by Venera 7 in 1970). Venus's thick clouds render observation of its surface impossible in visible light, and the first detailed maps did not emerge until the arrival of the Magellan orbiter in 1991. Plans have been proposed for rovers or more complex missions, but they are hindered by Venus's hostile surface conditions.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

0 个答案:

没有答案