交错显示物化传送带，同时以模态显示

我在模型中显示了传送带，但我遇到了问题。当我加载页面并点击类别时，旋转木马看起来交错或迷失方向;但是当我点击模式内部时，它会呈现确切的形状。我正在使用jQuery插件，但我认为我无法将它们按顺序放置。我在这里给我的HTML和JavaScript;我已经正确包含了jQuery和其他CDN内容。交错显示物化传送带，同时以模态显示

HTML：

<body> 
<div id="modal1" class="modal bottom-sheet"> 
    <div class="modal-content"> 



     <div id="modal2" class="carousel "> 
      <a class="carousel-item" href="#one!"><img src="1.jpg"></a> 
      <a class="carousel-item" href="#two!"><img src="1.jpg"></a> 
      <a class="carousel-item" href="#three!"><img src="1.jpg"></a> 
      <a class="carousel-item" href="#four!"><img src="1.jpg"></a> 
      <a class="carousel-item" href="#five!"><img src="1.jpg"></a> 
     </div> 


    </div> 
    <div class="modal-footer"> 
     <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
    </div> 
</div> 
<header> 
<div class="navbar-fixed"> 
    <ul id="dropdown1" class="dropdown-content"> 
     <li><a href="#">Profile</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Settings</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Logout</a></li> 
    </ul> 
<nav> 
    <div class="nav-wrapper" > 
     <div class="brand-logo" href="#" style="height:100%;pointer-events: none;"> 
      <img src="logo.png" style="height:100%;"> 
     </div> 
     <a href="#" class="brand-logo center" style="color: rgba(0,0,0,0.73);pointer-events: none;"><b>Idea Watch</b></a> 
     <ul id="nav-mobile" class="right hide-on-med-and-down"> 
      <li><a id="cate" href="#modal1" style="color: rgba(0,0,0,0.73);margin-right: 40%">CATEGORIES</a></li> 
      <li><a href="#" style="color: rgba(0,0,0,0.73);margin-right: 20%">BOOKMARKS</a></li> 
      <li><a class="dropdown-button" href="#" data-activates="dropdown1" style="margin-left: 50%">ME<i class="material-icons right">arrow_drop_down</i></a></li> 
     </ul> 
    </div> 
</nav> 
</div> 
</header>

这里是我的JS：

$(document).ready(function() { 
    let a = $(".dropdown-button"); 
    a.dropdown(); 
    $('.carousel').carousel(); 
    $('.modal').modal({ 
     dismissible: true, // Modal can be dismissed by clicking outside of the modal 
     opacity: 0, 
     inDuration: 300, // Transition in duration 
     outDuration: 200, // Transition out duration 
     startingTop: '4%', // Starting top style attribute 
     endingTop: '10%' // Ending top style attribute 
    }); 
    $('.parallax').parallax(); 
});

这里CSS：

.modal{ 
    position:absolute; 
    overflow:scroll; 
}

删除或写上面的CSS是什么都不做有利于

请帮忙！

< ---------- EDIT1 ------> 图片点击之前：

图片后 点击在模态

：

来源

2017-07-03 Sourabh

您必须在其准备好的回调模式中初始化组件。

https://codepen.io/anon/pen/QgrMVd

$(document).ready(function() { 
    let a = $(".dropdown-button"); 
    a.dropdown(); 
    $('.modal').modal({ 
     dismissible: true, // Modal can be dismissed by clicking outside of the modal 
     opacity: 0, 
     inDuration: 300, // Transition in duration 
     outDuration: 200, // Transition out duration 
     startingTop: '4%', // Starting top style attribute 
     endingTop: '10%', // Ending top style attribute 
     ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available. 
      $('.carousel').carousel(); 
     }, 
    }); 
    $('.parallax').parallax(); 
});

来源

2017-07-03 21:46:31

非常感谢你 – Sourabh

交错显示物化传送带，同时以模态显示

回答

相关问题