模態窗口：如何爲每個模態設置不同的內容？

我正在處理自己的自定義模態窗口，但是我遇到了問題。我想創建多個模式窗口，但是我需要爲每個模式應用不同的內容。模態窗口：如何爲每個模態設置不同的內容？

我的HTML代碼：

 <div id="footer"> 
      <div class="wrapper"> 
       <ul> 
        <li> 
         <a class="modal-window-trigger" id="help" href="help.php">Help</a> 
        </li> 
        <li> 
         <a class="modal-window-trigger" id="faq" href="faq.php">Frequently Asked Questions</a> 
        </li> 
       </ul> 
       <span id="footer-copyright"> 
        <a href="./..">Coded by Dylan - ©2015-2016</a> 
       </span> 
      </div> 
     </div> 
     <div class="modal-window"> 
      <div class="modal-window-container"> 
       <span class="modal-window-closer" title="Close the overlay"></span> 
       <h1 class="big-title" style="margin-bottom: 15px;">First Modal Window</h1> 
       <p>First Modal Window Text</p> 
      </div> 
     </div> 
     <div class="modal-window"> 
      <div class="modal-window-container"> 
       <span class="modal-window-closer" title="Close the overlay"></span> 
       <h1 class="big-title" style="margin-bottom: 15px;">Second Modal Window</h1> 
       <p>Second Modal Window Text</p> 
      </div> 
     </div> 
     <div id="expose-mask"></div>

我的JavaScript代碼：

(function($) 
{ 
    $(".modal-window-trigger").click(function(e) 
    { 
     e.preventDefault(); 
     $(".modal-window").addClass("shown"); 
     $("#expose-mask").css({"visibility": "visible"}); 
    }); 
    $(".modal-window-closer, #expose-mask").click(function(){ 
     $("#expose-mask").css({"visibility": "hidden"}); 
     $(".modal-window").removeClass("shown"); 
    }); 
})(jQuery);

結果：http://prntscr.com/7gd7g6

我想表明，當我點擊「幫助」的具體內容文本和另一個內容，當我點擊「常見問題」文本。

如何爲每個模態設置唯一的數據？

來源

2015-06-13 Uptop 14

(function($) 
     { 
      $(".modal-window-trigger").click(function(e) 
      { 
       e.preventDefault(); 
       var modal_id = $(this).attr('name'); 
       show_modal(modal_id) 

      }); 
      $(".modal-window-closer, #expose-mask").click(function(){ 
       $("#expose-mask").css({"visibility": "hidden"}); 
       $(".modal-window").removeClass("shown"); 
      }); 
     })(jQuery); 

     function show_modal(modal_id){  
      $('#'+modal_id).addClass("shown"); 
      $("#expose-mask").css({"visibility": "visible"}); 
     }

添加name屬性<a class="modal-window-trigger" name="model1">並更改ID模態窗口分別模型1。

來源

2015-06-13 07:46:49 vel

謝謝。仍然有問題。可以添加我的類「模態窗口」來設置所有模態窗口的樣式？因爲我可以在你的代碼中看到它已經消失，我需要風格化所有模態窗口。 http://prntscr.com/7gef1n –

你可以添加額外的類風格 – vel

感謝您的幫助。 :)工作！ –

(function($) 
    { 
     $(".modal-window-trigger").click(function(e) 
     { 
      e.preventDefault(); 
      var attrid = $(this).attr('id'); 
      if(attrid=='help'){ 
       $(".modal-window1").addClass("shown"); 
       $("#expose-mask").css({"visibility": "visible"}); 
       return; 
      }else if(attrid=='faq'){ 
       $(".modal-window2").addClass("shown"); 
       $("#expose-mask").css({"visibility": "visible"}); 
       return;  
      } 
     }); 
     $(".modal-window-closer, #expose-mask").click(function(){ 
      $("#expose-mask").css({"visibility": "hidden"}); 
      $(".modal-window").removeClass("shown"); 
     }); 
    })(jQuery);

更改類模態窗口模態，窗口1的第一窗口和模態窗口模態，窗口2的第二個窗口

來源

2015-06-13 07:19:14 vel

感謝您的支持，但添加其他模態窗口時有可能無法增加代碼？我打算添加至少10個模態窗口，這將是一個長碼。 –

是那個動態內容？ – vel

類似的東西：http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/例如，「name」鏈接到數據http：// prntscr .com/7gebn3 –

模態窗口：如何爲每個模態設置不同的內容？

回答

相關問題