我如何在彈出窗口中使用諸如消息變量之類的東西

Question

我正在尋找一種使用jQuery和javascript獲取和顯示消息變量的方法。 這是我的情況：我有一個彈出代碼，但我不想在每種情況下都必須復制並粘貼它，而我只想更改消息。

這是使一個彈出窗口起作用的代碼：

 jQuery(document).ready(function($){ //open popup $('.cd-popup-trigger').on('click', function(event){ event.preventDefault(); $('.cd-popup').addClass('is-visible'); }); //close popup $('.cd-popup').on('click', function(event){ if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) { event.preventDefault(); $(this).removeClass('is-visible'); } }); //close popup when clicking the esc keyboard button $(document).keyup(function(event){ if(event.which=='27'){ $('.cd-popup').removeClass('is-visible'); } }); }); 

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* -------------------------------- Primary style -------------------------------- */ html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 100%; font-family: "Lato", sans-serif; color: #8f9cb5; background-color: #ffd88f; } a { color: #35a785; text-decoration: none; } /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .img-replace { /* replace text with an image */ display: inline-block; overflow: hidden; text-indent: 100%; color: transparent; white-space: nowrap; } /* -------------------------------- xnugget info -------------------------------- */ .cd-nugget-info { text-align: center; position: absolute; width: 100%; height: 50px; line-height: 50px; bottom: 0; left: 0; } .cd-nugget-info a { position: relative; font-size: 14px; color: #5e6e8d; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .no-touch .cd-nugget-info a:hover { opacity: .8; } .cd-nugget-info span { vertical-align: middle; display: inline-block; } .cd-nugget-info span svg { display: block; } .cd-nugget-info .cd-nugget-info-arrow { fill: #5e6e8d; } /* -------------------------------- Main components -------------------------------- */ header { height: 200px; line-height: 200px; text-align: center; background-color: #5e6e8d; color: #FFF; } header h1 { font-size: 20px; font-size: 1.25rem; } .cd-popup-trigger { display: block; width: 170px; height: 50px; line-height: 50px; margin: 3em auto; text-align: center; color: #FFF; font-size: 14px; font-size: 0.875rem; font-weight: bold; text-transform: uppercase; border-radius: 50em; background: #35a785; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); } @media only screen and (min-width: 1170px) { .cd-popup-trigger { margin: 6em auto; } } /* -------------------------------- xpopup -------------------------------- */ .cd-popup { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(94, 110, 141, 0.9); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; } .cd-popup.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s; transition: opacity 0.3s 0s, visibility 0s 0s; } .cd-popup-container { position: relative; width: 90%; max-width: 400px; margin: 4em auto; background: #FFF; border-radius: .25em .25em .4em .4em; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); /* Force Hardware Acceleration in WebKit */ -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-popup-container p { padding: 3em 1em; } .cd-popup-container .cd-buttons:after { content: ""; display: table; clear: both; } .cd-popup-container .cd-buttons li { float: left; width: 50%; list-style: none; } .cd-popup-container .cd-buttons a { display: block; height: 60px; line-height: 60px; text-transform: uppercase; color: #FFF; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-popup-container .cd-buttons li:first-child a { background: #fc7169; border-radius: 0 0 0 .25em; } .no-touch .cd-popup-container .cd-buttons li:first-child a:hover { background-color: #fc8982; } .cd-popup-container .cd-buttons li:last-child a { background: #b6bece; border-radius: 0 0 .25em 0; } .no-touch .cd-popup-container .cd-buttons li:last-child a:hover { background-color: #c5ccd8; } .cd-popup-container .cd-popup-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; } .cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after { content: ''; position: absolute; top: 12px; width: 14px; height: 3px; background-color: #8f9cb5; } .cd-popup-container .cd-popup-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 8px; } .cd-popup-container .cd-popup-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 8px; } .is-visible .cd-popup-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } @media only screen and (min-width: 1170px) { .cd-popup-container { margin: 8em auto; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#0" class="cd-popup-trigger">View Pop-up</a> <div class="cd-popup" role="alert"> <div class="cd-popup-container"> <p>Are you sure you want to delete this element?</p> <ul class="cd-buttons"> <li><a href="#0">Yes</a></li> <li><a href="#0">No</a></li> </ul> <a href="#0" class="cd-popup-close img-replace">Close</a> </div> <!-- cd-popup-container --> </div> <!-- cd-popup --> 

在某種程度上，我需要以某種方式使消息顯示出來，具體取決於我單擊的彈出按鈕，而不必重寫jQuery和HTML來更改所有內容的類。

謝謝。 如果我不夠清楚，請讓我現在。

Answer 1

單擊時觸發此操作：

   $('.cd-popup-container p').text('New Message');

編輯：

HTML

         <div id="Delete1">Yes</div>
         <div id="Nothing">No</div>

Java腳本

        $('#Delete1').click(function(){
        $('.cd-popup-container p').text('Message 1');
        });