如何創建成功消息的關閉按鈕？

-3

我無法爲我點擊提交時應顯示的消息創建關閉按鈕。我創建了該按鈕，但它無法隱藏該消息。如何創建成功消息的關閉按鈕？

這裏是我的代碼：

body { 
 
     background: #1488EA; 
 
      } 
 

 
     #card { 
 
     position: relative; 
 
     top: 110px; 
 
     width: 320px; 
 
     display: block; 
 
     margin: auto; 
 
     text-align: center; 
 
     font-family: 'Source Sans Pro', sans-serif; 
 
      } 
 

 
     #upper-side { 
 
     padding: 2em; 
 
     background-color: #3CB371; 
 
     display: block; 
 
     color: #fff; 
 
     border-top-right-radius: 8px; 
 
     border-top-left-radius: 8px; 
 
     } 
 

 
     #checkmark { 
 
     font-weight: lighter; 
 
     fill: #fff; 
 
     margin: -3.5em auto auto 20px; 
 
     } 
 

 
     #status { 
 
     font-weight: lighter; 
 
     text-transform: uppercase; 
 
     letter-spacing: 2px; 
 
     font-size: 1em; 
 
     margin-top: -.2em; 
 
     margin-bottom: 0; 
 
     } 
 

 
     #lower-side { 
 
     padding: 2em 2em 5em 2em; 
 
     background: #F0F0F0; 
 
     display: block; 
 
     border-bottom-right-radius: 8px; 
 
     border-bottom-left-radius: 8px; 
 
        } 
 

 
     #message { 
 
     margin-top: -.5em; 
 
     color: #757575; 
 
     letter-spacing: 1px; 
 
        }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
     <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    </head> 
 
    
 

 
    <div id='card' class="animated fadeIn"> 
 
    <div id='upper-side'> 
 
    <?xml version="1.0" encoding="utf-8"?> 
 
     <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 
     <svg version="1.1" id="checkmark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
 
     <path d="M131.583,92.152l-0.026-0.041c-0.713-1.118-2.197-1.447-3.316-0.734l-31.782,20.257l-4.74-12.65 
 
\t c-0.483-1.29-1.882-1.958-3.124-1.493l-0.045,0.017c-1.242,0.465-1.857,1.888-1.374,3.178l5.763,15.382 
 
\t c0.131,0.351,0.334,0.65,0.579,0.898c0.028,0.029,0.06,0.052,0.089,0.08c0.08,0.073,0.159,0.147,0.246,0.209 
 
\t c0.071,0.051,0.147,0.091,0.222,0.133c0.058,0.033,0.115,0.069,0.175,0.097c0.081,0.037,0.165,0.063,0.249,0.091 
 
\t c0.065,0.022,0.128,0.047,0.195,0.063c0.079,0.019,0.159,0.026,0.239,0.037c0.074,0.01,0.147,0.024,0.221,0.027 
 
\t c0.097,0.004,0.194-0.006,0.292-0.014c0.055-0.005,0.109-0.003,0.163-0.012c0.323-0.048,0.641-0.16,0.933-0.346l34.305-21.865 
 
\t C131.967,94.755,132.296,93.271,131.583,92.152z" /> 
 
     <circle fill="none" stroke="#ffffff" stroke-width="5" stroke-miterlimit="10" cx="109.486" cy="104.353" r="32.53" /> 
 
     </svg> 
 
     <h3 id='status'> 
 
     Success 
 
     </h3> 
 
    </div> 
 
    <div id='lower-side'> 
 
    <p id='message'> 
 
     Thank you for your interest in Neotic. 
 
    </p> 
 
    <div> 
 
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
 
    </div> 
 
    </div> 
 

 
    </html>

當前的關閉按鈕不起作用。

來源

2017-07-03 faro

看起來無非就是一個鏈接到頂部這一頁。什麼讓你覺得它應該關閉任何東西？ – Quentin

我很抱歉也許我的問題似乎微不足道，但我真的很新.. Close 在href我應該添加鏈接的權利？請我需要你的幫助 – faro

只是這個代碼添加到該按鈕

onclick="$('#card').hide();"

來源

2017-07-03 12:02:25

謝謝你lotttt – faro

它可以用jQuery工作

$(".ui-btn").on("click",function(){ 
    $("#card").css("display","none"); 
});

來源

2017-07-03 12:00:37 Anu

謝謝youuuuuuu – faro

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right" onclick="document.getElementById('card').style.display= 'none'">Close</a>

因此，這將basicly瞄準card DIV這是你的消息，它會隱藏它。

只需用這個替換原來的鏈接即可。

來源

2017-07-03 12:03:35 user5014677

謝謝!!!!!! – faro

由於您已經加載了jQuery，因此在解決方案中可以關閉該消息。

首先，我已經包裹要關閉在另一個DIV

<div id="messageContainer"> 

    <div id='upper-side'> 
    <?xml version="1.0" encoding="utf-8"?> 
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg version="1.1" id="checkmark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
     <path d="M131.583,92.152l-0.026-0.041c-0.713-1.118-2.197-1.447-3.316-0.734l-31.782,20.257l-4.74-12.65 
    c-0.483-1.29-1.882-1.958-3.124-1.493l-0.045,0.017c-1.242,0.465-1.857,1.888-1.374,3.178l5.763,15.382 
    c0.131,0.351,0.334,0.65,0.579,0.898c0.028,0.029,0.06,0.052,0.089,0.08c0.08,0.073,0.159,0.147,0.246,0.209 
    c0.071,0.051,0.147,0.091,0.222,0.133c0.058,0.033,0.115,0.069,0.175,0.097c0.081,0.037,0.165,0.063,0.249,0.091 
    c0.065,0.022,0.128,0.047,0.195,0.063c0.079,0.019,0.159,0.026,0.239,0.037c0.074,0.01,0.147,0.024,0.221,0.027 
    c0.097,0.004,0.194-0.006,0.292-0.014c0.055-0.005,0.109-0.003,0.163-0.012c0.323-0.048,0.641-0.16,0.933-0.346l34.305-21.865 
    C131.967,94.755,132.296,93.271,131.583,92.152z" /> 
     <circle fill="none" stroke="#ffffff" stroke-width="5" stroke-miterlimit="10" cx="109.486" cy="104.353" r="32.53" /> 
    </svg> 
    <h3 id='status'> 
    Success 
    </h3> 
    </div> 
    <div id='lower-side'> 
     <p id='message'> 
     Thank you for your interest in Neotic. 
     </p> 

     <a id="closeBtn" href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
    </div> 
</div>

二創建一個腳本來定位容器的。點擊和.hide（）方法的內容。

我發現在這裏html的結構的幾個問題是完整的文件。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

    <style> 
    body { 
     background: #1488EA; 
     } 

    #card { 
     position: relative; 
     top: 110px; 
     width: 320px; 
     display: block; 
     margin: auto; 
     text-align: center; 
     font-family: 'Source Sans Pro', sans-serif; 
     } 

    #upper-side { 
     padding: 2em; 
     background-color: #3CB371; 
     display: block; 
     color: #fff; 
     border-top-right-radius: 8px; 
     border-top-left-radius: 8px; 
    } 

    #checkmark { 
     font-weight: lighter; 
     fill: #fff; 
     margin: -3.5em auto auto 20px; 
    } 

    #status { 
    font-weight: lighter; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 1em; 
    margin-top: -.2em; 
    margin-bottom: 0; 
    } 

    #lower-side { 
    padding: 2em 2em 5em 2em; 
    background: #F0F0F0; 
    display: block; 
    border-bottom-right-radius: 8px; 
    border-bottom-left-radius: 8px; 
       } 

    #message { 
    margin-top: -.5em; 
    color: #757575; 
    letter-spacing: 1px; 
       } 

    </style> 


</head> 


<body> 

<h4>This is text in the body of the page</h4> 
<div id='card' class="animated fadeIn"> 

<div id="messageContainer"> 

    <div id='upper-side'> 
    <?xml version="1.0" encoding="utf-8"?> 
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg version="1.1" id="checkmark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
     <path d="M131.583,92.152l-0.026-0.041c-0.713-1.118-2.197-1.447-3.316-0.734l-31.782,20.257l-4.74-12.65 
    c-0.483-1.29-1.882-1.958-3.124-1.493l-0.045,0.017c-1.242,0.465-1.857,1.888-1.374,3.178l5.763,15.382 
    c0.131,0.351,0.334,0.65,0.579,0.898c0.028,0.029,0.06,0.052,0.089,0.08c0.08,0.073,0.159,0.147,0.246,0.209 
    c0.071,0.051,0.147,0.091,0.222,0.133c0.058,0.033,0.115,0.069,0.175,0.097c0.081,0.037,0.165,0.063,0.249,0.091 
    c0.065,0.022,0.128,0.047,0.195,0.063c0.079,0.019,0.159,0.026,0.239,0.037c0.074,0.01,0.147,0.024,0.221,0.027 
    c0.097,0.004,0.194-0.006,0.292-0.014c0.055-0.005,0.109-0.003,0.163-0.012c0.323-0.048,0.641-0.16,0.933-0.346l34.305-21.865 
    C131.967,94.755,132.296,93.271,131.583,92.152z" /> 
     <circle fill="none" stroke="#ffffff" stroke-width="5" stroke-miterlimit="10" cx="109.486" cy="104.353" r="32.53" /> 
    </svg> 
    <h3 id='status'> 
    Success 
    </h3> 
    </div> 
    <div id='lower-side'> 
     <p id='message'> 
     Thank you for your interest in Neotic. 
     </p> 

     <a id="closeBtn" href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
    </div> 
</div> 

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

<script> 
$("#closeBtn").click (function(){ 
    event.preventDefault(); 
    $('#messageContainer').hide(); 
}) 
</script> 

</body> 

</html>

我也建議尋找到引導框架，這是衆所周知的，它提供了非常好的類和方法來處理模態和消息http://getbootstrap.com/javascript/#modals

來源

2017-07-03 12:25:28 kangular

如何創建成功消息的關閉按鈕？

回答

相關問題