我正在编写一个投资组合，其中一部分是在页面上的模态中。但是， CAN NOT 可能因任何原因而无法运行。这是codepen：https://codepen.io/dmeskin/pen/GmvqxV（模态是Pottery＆amp; Design Buttons）或者，如果你想要它，这里是普通的html＆lt; 3
<div class="parallax">
<nav class="navbar navbar-default navbar-fixed-top"><span class="navbar-toggler-icon"></span>
</button>
<div class="container-fluid">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav">
<li class="active"><a href="/index.html">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Work">My Work</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="mailto:msmirnovany@gmail.com">Email Me</a>
<li><a href="http://www.marianna.htmltoy.com/home/">Pottery Blog</a></li>
<li>
</ul>
</div>
</div>
</nav>
<div class='content'>
<br>
<div class="container">
<div class="well" id="body">
<h1 class="text-primary text-center animated rollIn">Marianna Smirnova</h1>
<div id="modals">
<!-- Trigger the modal with a button -->
<button type="button" class=" center-block btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">My Pottery</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content center-block">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Pottery</h4>
</div>
<div class="modal-body">
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://marianna.htmltoy.com/home/_data/i/upload/2016/09/25/20160925132047-a7267d4c-me.jpg" alt="First Slide">
</div>
<div class="item">
<img src="http://marianna.htmltoy.com/home/_data/i/upload/2016/09/25/20160925141914-b93d10c5-me.jpg" alt="Second Slide">
</div>
<div class="item">
<img src="http://marianna.htmltoy.com/home/_data/i/upload/2016/09/25/20160925183344-36e1d48b-me.jpg" alt="Third Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class=" center-block btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">My Design</button>
<br>
<!-- Modal -->
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content center-block">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Design</h4>
</div>
<div class="modal-body">
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dmeskin/image/upload/v1493908232/320px-Image_To_Come_Later_tqqhjb.gif" alt="First Slide">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dmeskin/image/upload/v1493908232/320px-Image_To_Come_Later_tqqhjb.gif" alt="Second Slide">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dmeskin/image/upload/v1493908232/320px-Image_To_Come_Later_tqqhjb.gif" alt="Third Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div id="About">
<h3 class="text-primary"> About</h3>
<p>Ancient alien aircraft DNA manipulation Chariot of the Gods, space travel Ezekiel Nazca lines kachina doll, astronaut mystery technology ancient alien foo fighter. Sanskrit Mahabharata helicopter heiroglyph targeted mutation ancient civilization
Sumerian texts, Indian texts weightless astronaut earth mound Ezekiel golden disk, Sumerian texts space time burmuta triangle helicopter heiroglyph elongated skull. Vimana sanskrit Mayan mystery SETI cover up, magnetic current sanskrit otherworldly
visitors pyramids sanskrit, pre-colonial aerodynamics Mayan DNA manipulation. Ancient alien theorists von Daniken aircraft mainstream archaelogy, I know it sounds crazy... Spaceships legendary times Machu Picchu pyramids, worm hole elongated
skull astronaut earth mound. Petroglyph golden disk pyramids vortex aircraft UFO ancient religions, King Soloman crystal skull ancient civilization star gates, targeted mutation choral castle contend foo fighter. Targeted mutation cover up
spaceships foo fighter DNA manipulation star gates portal, mystery sightings space time Nazca lines aircraft contend. Chariot of the Gods portal ancient alien theorists, otherworldly visitors King Soloman crystal skull mercury gods, burmuta
triangle. I know it sounds crazy... Stonehenge Machu Picchu petroglyph star gates star gates flying vessels, sun disc technology UFO vortex space time extraterrestrial portal burmuta triangle. Aircraft space travel, the answer is a resounding
YES... Stonehenge megoliths. Mayan Indian texts star gates astronaut grey, Nazca lines grey kachina doll anti-gravity, ancient alien theorists foo fighter. I know it sounds crazy... Flying vessels star people ancient civilization foo fighter
Vymaanika-Shaastra Annunaki, mercury UFO Easter island helicopter heiroglyph star people Nazca lines. Star people earth mound otherworldly visitors Chariot of the Gods Vymaanika-Shaastra, vimana kachina doll crystal skull crystal skull pyramids
mainstream archaelogy, ancient alien helicopter heiroglyph Nazca lines vortex petroglyph legendary times. Crystal skull DNA manipulation ancient civilization star people electromagnetic, space time Chariot of the Gods mainstream archaelogy
pyramids, ancient god sanskrit mystery elongated skull. Mainstream archaelogy golden disk kachina doll space brothers SETI, otherworldly visitors ancient religions vimana, Nazca lines burmuta triangle otherworldly visitors SETI. Easter island
technology grey extraterrestrial mainstream archaelogy flying vessels, aircraft astronaut I know it sounds crazy..., I know it sounds crazy... Space time. Worm hole sun disc Puma Punku anti-gravity aircraft sightings kachina doll, Sumerian
texts extraterrestrial origin stonehenge elongated skull, sun disc extraterrestrial anti-gravity UFO ancient religions star gates. Extraterrestrial origin star gates UFO earth mound pyramids megoliths Indian texts, flying vessels ancient civilization
Nazca lines megoliths Easter island mainstream archaelogy, Chariot of the Gods weightless DNA manipulation the vedas Machu Picchu. Ancient alien theorists aircraft otherworldly visitors Sumerian texts extraterrestrial origin, contend sanskrit
sun disc star gates Mahabharata mystery. Legendary times weightless golden disk Indian texts NASA Ezekiel mainstream archaelogy, grey foo fighter worm hole earth mound King Soloman evidence, Machu Picchu Mayan space time cover up sun disc
portal. UFO space time Machu Picchu grey, star gates targeted mutation spaceships. Ancient religions ancient alien aircraft sun disc flying vessels Giorgio Ezekiel grey SETI weightless petroglyph, Chariot of the Gods petroglyph sightings vimana
choral castle inter-dimensional helicopter heiroglyph Machu Picchu. Anti-gravity NASA aircraft Giorgio sightings targeted mutation, the vedas anti-gravity weightless portal..</p>
<div id="Work">
<h3 class="text-primary">My Work</h3>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of
disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the
runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the
digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Podcasting operational change management inside of workflows to establish
a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. Collaboratively
administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. Efficiently unleash cross-media
information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier
niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service. Objectively innovate empowered manufactured products whereas
parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables. Proactively envisioned multimedia based expertise and cross-media
growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. Phosfluorescently engage worldwide methodologies
with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities.</p>
</div>
<div id="testimonials">
<h3 class="text-primary">Testimonials</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<p>Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium.</p>
<p>Integer tincidunt. Cras dapibus.</p>
<p>Vivamus elementum semper nisi.</p>
<p>Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet.</p>
<p>Quisque rutrum. Aenean imperdiet.</p>
<p>Etiam ultricies nisi vel augue.</p>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
<p>Maecenas nec odio et ante tincidunt tempus.</p>
<p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
<p>Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>
<p>Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
<p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.carousel {
background: #fff;
margin-top: 20px;
}
.carousel .item img {
margin: 0 auto;
/* Align slide image horizontally center */
}
.bs-example {
margin: 20px;
}
.parallax {
/* The image used */
background-image: url("http://res.cloudinary.com/dmeskin/image/upload/v1493909616/1482247060_iStock-120660750_bvttju.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
</style>
<script>
$(window).on("scroll", function() {
if ($(".scroller").is(":visible")) {
$(".scroller").delay(1000).addClass("bounceInDown");
}
});
// Smooth scroll for in page links - http://wibblystuff.blogspot.in/2014/04/in-page-smooth-scroll-using-css3.html
// Improvements from - http://codepen.io/kayhadrin/pen/KbalA
$(function() {
var $window = $(window),
$document = $(document),
transitionSupported =
typeof document.body.style.transitionProperty === "string", // detect CSS transition support
scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function(e) {
var target, avail, scroll, deltaScroll;
if (
location.pathname.replace(/^\//, "") ==
this.pathname.replace(/^\//, "") &&
location.hostname == this.hostname
) {
target = $(this.hash);
target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
if (target.length) {
avail = $document.height() - $window.height();
if (avail > 0) {
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
} else {
scroll = 0;
}
deltaScroll = $window.scrollTop() - scroll;
// if we don't have to scroll because we're already at the right scrolling level,
if (!deltaScroll) {
return; // do nothing
}
e.preventDefault();
if (transitionSupported) {
$("html")
.css({
"margin-top": deltaScroll + "px",
transition: scrollTime + "s ease-in-out"
})
.data("transitioning", scroll);
} else {
$("html, body")
.stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
.animate(
{
scrollTop: scroll + "px"
},
scrollTime * 1000
);
return;
}
}
}
});
if (transitionSupported) {
$(
"html"
).on(
"transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd",
function(e) {
var $this = $(this), scroll = $this.data("transitioning");
if (e.target === e.currentTarget && scroll) {
$this.removeAttr("style").removeData("transitioning");
$("html, body").scrollTop(scroll);
}
}
);
}
});
$(document).ready(function() {
$("img.a").hover(
function() {
$(this).stop().animate(
{
opacity: "0"
},
"slow"
);
},
function() {
$(this).stop().animate(
{
opacity: "1"
},
"slow"
);
}
);
});
$(document).ready(function() {
$("#navigation a, #fixedbar a").on("click", function(e) {
e.preventDefault();
});
$(window).on("scroll", function() {
var scrolltop = $(this).scrollTop();
if (scrolltop >= 215) {
$("#fixedbar").fadeIn(250);
} else if (scrolltop <= 210) {
$("#fixedbar").fadeOut(250);
}
});
});
$(document).ready(function() {
$("#MyModal").modal();
});
</script>
感谢您的帮助！ ---更新了代码，代码的分支在这里：https://codepen.io/dmeskin/pen/EmLxqa ---
现在只有1个模态打开，滑块不起作用，另一个像死老鼠一样坐在那里。
答案 0 :(得分：0)
Nerd，而不是调用这个$（“＃MyModal”）。modal（）你可以尝试这样的$（“＃MyModal”）。modal（'show'）希望它应该有效。
答案 1 :(得分：0)
// ----- Updated JS
$(document).ready(function() {
openModal = function() {
$("#myModal").modal({show:true});
}
});
// ---- Updated HTML
<button type="button" class=" center-block btn btn-info btn-lg" onclick="openModal();">My Pottery</button>
我使用onclick代替data-target