我试图在网站上多次使用css-only模式。我已经更改了Id以使其显示多个模态，但只显示html代码中的第一个模态。点击其他人不做任何事情然后改变地址栏中的内容。我在这里缺少什么？
另外：这是html代码：
<!-- Modal Style Sheet -->
<link rel="stylesheet" href="css/main-modal.css">
</head>
<body>
<div class="home-main-section-panel-title" style="bottom:11%;"><a href="#NYCModal">Discounts.</a></div>
<div class="home-main-section-panel-subtitle"><a href="#discountModal">Tickets • Dining • Retail</a></div>
<a href="#discountModal"><img class="img" id="fade" src="img/rewards.jpg" alt=""/></a>
</div>
<div class="home-main-section-panel-title" style="bottom:19.5%;"><a href="#NYCModal">New York.</a></div>
<div class="home-main-section-panel-subtitle">Theatre News • B-way Reviews • NYC Discounts</div>
<a href="#NYCModal"><img class="img" id="fade" src="img/nyc-small.jpg" alt=""/></a>
</div>
</div>
<!-----------------------------------------------modals----------------------------------------------------------------------------------------->
<!------------------------------------------------- Discounts Modal --------------------------------------------------------------------------->
<div id="discountModal" class="modalDialog">
<div class="modal-main-wrapper">
<div class="modal-controls">
<div><a href="#close" title="Close" class="close-modal">x Close</a>
<div><a href="#close" title="Close" class="back">◄ Back</a>
</div>
</div>
<div class="col-sm-12" style="text-align:center"><img src="img/logo.png" width="170" height="48" alt=""/></div>
</div>
<div class="modal-wrapper">
<div class="modal-left-wrapper">
<div class="modal-left-top">
<div class="intro">
<h1>Theatre:<br>
Personalized.</h1>
<h2>Create a FREE account to remove this side bar AND:</h2>
<h3>
<br> • Discounts - save on Theatre, dining and retail
<br> • Customized auditions and job searches based on your best roles and top job skills
<br> • Students and Teachers - recieve free mentoring from proffesional actors and techs</h3>
</div>
</div>
<div class="modal-left-bottom">
<div class="log-in">
<p>
Email:<br>
<input type="email" name="email" id="email">
</p>
<p>
Password:<br>
<input type="password" name="password" id="password">
</p>
<p>
<input class="btn" type="submit" name="Log-In" id="submit" value="Log-In"><br>
Dont have an account? Sign-up
</p>
<hr>
Connect With:<br>
<input class="btn" type="submit" name="Log-In with FB" id="submit" value="Log-In with FB">
<input class="btn" type="submit" name="Log-In with Google" id="submit" value="Log-In with Google">
</div>
</div>
</div>
<!--start modal interior page content-->
<div class="modal-content-right">
<div class="modal-main-wrapper">
<section id="discount-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#discount-slider" data-slide-to="0" class="active"></li>
<li data-target="#discount-slider" data-slide-to="1"></li>
<li data-target="#discount-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background-image: url(img/slides/nyc.jpg)">
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="carousel-content centered">
<h2 class="animation animated-item-1">Thespian Rewards</h2>
<p class="animation animated-item-2">Sed mattis enim in nulla blandit tincidunt. Phasellus vel sem convallis, mattis est id, interdum augue. Integer luctus massa in arcu euismod venenatis. </p>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(img/slides/2.jpg)">
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="carousel-content center centered">
<h2 class="animation animated-item-1">Save Money - Thespian Rewards</h2>
<p class="animation animated-item-2">Phasellus adipiscing felis a dictum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ligula risus. </p>
<br>
<a class="btn btn-md animation animated-item-3" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(img/slides/3.jpg)">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="carousel-content centered">
<h2 class="animation animated-item-1">Jobs and Auditions</h2>
<p class="animation animated-item-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae euismod lacus. Maecenas in tempor lectus. Nam mattis, odio ut dapibus ornare, libero. </p>
<br>
<a class="btn btn-md animation animated-item-3" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#discount-slider" data-slide="prev">
<i class="icon-angle-left"></i>
</a>
<a class="next hidden-xs" href="#discount-slider" data-slide="next">
<i class="icon-angle-right"></i>
</a>
</section><!--/#discounts-slider-->
<!-- content-->
<div class="col-sm-12" style="padding: 0 !important">
<div class="news-section-one"><div class="section-header"><div class="section-header-left">Featured News</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!------------------------------------------- end Discounts modal -------------------------------------------------------------------------->
<!----------------------------------------- New York Modal -------------------------------------------------------------------------------->
<div id="NYCModal" class="modalDialog" style="z-index:999999999">
<div class="modal-main-wrapper">
<div class="modal-controls">
<div><a href="#close" title="Close" class="close-modal">x Close</a>
<div><a href="#close" title="Close" class="back">◄ Back</a>
</div>
</div>
<div class="col-sm-12" style="text-align:center"><img src="img/logo.png" width="170" height="48" alt=""/></div>
</div>
<div class="modal-wrapper">
<div class="modal-left-wrapper">
<div class="modal-left-top">
<div class="intro">
<h1>Theatre:<br>
Personalized.</h1>
<h2>Create a FREE account to remove this side bar AND:</h2>
<h3>
<br> • Discounts - save on Theatre, dining and retail
<br> • Customized auditions and job searches based on your best roles and top job skills
<br> • Students and Teachers - recieve free mentoring from proffesional actors and techs</h3>
</div>
</div>
<div class="modal-left-bottom">
<div class="log-in">
<p>
Email:<br>
<input type="email" name="email" id="email">
</p>
<p>
Password:<br>
<input type="password" name="password" id="password">
</p>
<p>
<input class="btn" type="submit" name="Log-In" id="submit" value="Log-In"><br>
Dont have an account? Sign-up
</p>
<hr>
Connect With:<br>
<input class="btn" type="submit" name="Log-In with FB" id="submit" value="Log-In with FB">
<input class="btn" type="submit" name="Log-In with Google" id="submit" value="Log-In with Google">
</div>
</div>
</div>
<!--start modal interior page content-->
<div class="modal-content-right">
<div class="modal-main-wrapper">
<section id="main-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background-image: url(img/slides/nyc.jpg)">
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="carousel-content centered">
<h2 class="animation animated-item-1">One Source for Broadway News</h2>
<p class="animation animated-item-2">Sed mattis enim in nulla blandit tincidunt. Phasellus vel sem convallis, mattis est id, interdum augue. Integer luctus massa in arcu euismod venenatis. </p>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(img/slides/2.jpg)">
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="carousel-content center centered">
<h2 class="animation animated-item-1">Save Money - Thespian Rewards</h2>
<p class="animation animated-item-2">Phasellus adipiscing felis a dictum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ligula risus. </p>
<br>
<a class="btn btn-md animation animated-item-3" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(img/slides/3.jpg)">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="carousel-content centered">
<h2 class="animation animated-item-1">Jobs and Auditions</h2>
<p class="animation animated-item-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae euismod lacus. Maecenas in tempor lectus. Nam mattis, odio ut dapibus ornare, libero. </p>
<br>
<a class="btn btn-md animation animated-item-3" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="icon-angle-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="icon-angle-right"></i>
</a>
</section><!--/#main-slider-->
<!-- content-->
<div class="col-sm-12" style="padding: 0 !important">
<div class="news-section-one"><div class="section-header"><div class="section-header-left">Featured News</div>
</div>
<div class="news-panel-one">
<img src="http://static.playbill.com/dims4/default/963f390/2147483647/crop/1272x637%2B0%2B0/resize/970x486/quality/90/?url=http%3A%2F%2Fstatic.playbill.com%2F42%2F62%2Fbe16d8a54dfcb77c5c5beb018303%2Fscreen-shot-2016-08-31-at-2.17.58%20PM.png" width="100%" height="100%" alt=""/>
<div class="news-panel-header">
<h1>Watch Renee Elise Goldsberry Sing Deleted Hamilton Song at Final #Ham4Ham Concert</h1>
</div>
</div>
<div class="news-panel-two">
<img src="https://images.bwwstatic.com/columnpic7/x680D65B537D-9AB9-F646-67EA40A099E17CDD.jpg.pagespeed.ic.1cMkqDeKKt.jpg" width="100%" height="100%" alt=""/>
<div class="news-panel-header">
<h1>Watch Renee Elise Goldsberry Sing Deleted Hamilton Song at Final #Ham4Ham Concert</h1>
</div>
</div>
<div class="news-panel-three">
<img style="overflow:hidden;" src="https://s3.amazonaws.com/tm-carousel-production/1_top-story_57c08442ad179.jpg" width="100%" height="100%" alt=""/>
<div class="news-panel-header">
<h1>Watch Renee Elise Goldsberry Sing Deleted Hamilton Song at Final #Ham4Ham Concert</h1>
</div>
</div>
</div>
<div class="news-section-two">
<div class="section-header">
<div class="section-header-left">
Blogs</div>
</div>
<div style="border: solid black 2px;">
<!-- start RSS Feed code --><script type="text/javascript">document.write('\x3Cscript type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'feed.mikle.com/js/rssmikle.js">\x3C/script>');</script><script type="text/javascript">(function() {var params = {rssmikle_url: "https://newyorktheater.me/feed/",rssmikle_frame_width: "100%",rssmikle_frame_height: "700",frame_height_by_article: "0",rssmikle_target: "_blank",rssmikle_font: "'Trebuchet MS', Verdana, Arial",rssmikle_font_size: "14",rssmikle_border: "off",responsive: "of",rssmikle_css_url: "http://audienceconnections.com/dontuse/css/test.css",text_align: "left",text_align2: "left",corner: "off",scrollbar: "on",autoscroll: "off",scrolldirection: "up",scrollstep: "3",mcspeed: "20",sort: "new",rssmikle_title: "off",rssmikle_title_bgcolor: "#0066FF",rssmikle_title_color: "#FFFFFF",rssmikle_title_bgimage: "",rssmikle_item_bgcolor: "#FFFFFF",rssmikle_item_bgimage: "",rssmikle_item_title_length: "100",rssmikle_item_title_color: "#000000",rssmikle_item_border_bottom: "on",rssmikle_item_description: "on",item_link: "off",rssmikle_item_description_length: "100",rssmikle_item_description_color: "#666666",rssmikle_item_date: "off",rssmikle_timezone: "Etc/GMT",datetime_format: "%b %e, %Y %l:%M %p",item_description_style: "text+tn",item_thumbnail: "full",item_thumbnail_selection: "auto",article_num: "10",rssmikle_item_podcast: "off",keyword_inc: "",keyword_exc: ""};feedwind_show_widget_iframe(params);})();</script><div style="font-size:10px; text-align:center; width:100%;"><a href="" target="_self" style="color:#CCCCCC;">Scroll Down for More</a></div><!-- end RSS Feedwind code -->
<script>
function htmlspecialchars2($string = "", $maxWordLength = 0){
return wordwrap($string , $maxWordLength,"\n", true);
}
</script>
</div>
</div>
<div class="news-section-three">
<div class="section-header">
<div class="section-header-left">News</div>
</div>
</div>
<div class="news-section-four">
<div class="section-header">
<div class="section-header-left">Video</div>
removed
</div>
</div>
<div class="news-section-five">
<div class="section-header">
<div class="section-header-left">Photo</div>
REMOVED
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------- end New York modal ------------------------------------------------------------------------------------------------>
<!--------------------------------------------------------------------modals-------------------------------------------------------------------------------------------------------->