如果某些代碼不受瀏覽器支持，如何執行特定的代碼塊？

<body> 
    <button id="show-dialog" type="button" class="mdl-button">Show Dialog</button> 
    <dialog class="mdl-dialog"> 
    <h4 class="mdl-dialog__title">Allow data collection?</h4> 
    <div class="mdl-dialog__content"> 
     <p> 
     Allowing us to collect data will let us get you the information you want faster. 
     </p> 
    </div> 
    <div class="mdl-dialog__actions"> 
     <button type="button" class="mdl-button">Agree</button> 
     <button type="button" class="mdl-button close">Disagree</button> 
    </div> 
    </dialog> 
    <script> 
    var dialog = document.querySelector('dialog'); 
    var showDialogButton = document.querySelector('#show-dialog'); 
    if (! dialog.showModal) { 
     dialogPolyfill.registerDialog(dialog); 
    } 
    showDialogButton.addEventListener('click', function() { 
     dialog.showModal(); 
    }); 
    dialog.querySelector('.close').addEventListener('click', function() { 
     dialog.close(); 
    }); 
    </script> 
</body>

我在我的web應用程序中使用了上述材料設計組件。該對話框與某些瀏覽器不兼容。如果瀏覽器不支持上述代碼，我需要運行以下代碼。我試着閱讀功能檢測文檔，但需要很多先決條件。如果某些代碼不受瀏覽器支持，如何執行特定的代碼塊？

<body> 
<button id="myBtn">Open Modal</button> 
<div id="myModal" class="modal"> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <p>Some text in the Modal..</p> 
    </div> 
</div> 
<script> 
var modal = document.getElementById('myModal'); 
var btn = document.getElementById("myBtn"); 
var span = document.getElementsByClassName("close")[0]; 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 
span.onclick = function() { 
    modal.style.display = "none"; 
} 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 
</body>

來源

2017-10-14 unknown123

爲什麼不創建一個自定義對話框？ – mrid

它不支持..或者像它沒有顯示預期的結果。 – unknown123

我需要使用材料設計。但如果不支持，我必須運行其他代碼 – unknown123

注：這個答案使用jQuery JavaScript庫。

jQuery(function($){ 
 
    $('.MatModal').click(function(e){ 
 
     e.preventDefault(); 
 
     $('#MatModal-container').show(0,function(){ 
 
      $(this).addClass('show-MatModal'); 
 
      setTimeout(function(){ 
 
       $('#MatModal-container').addClass('seeModal'); 
 
      },250); 
 
     }); 
 
    }); 
 
    $('#close-MatModal').click(function(e){ 
 
     e.preventDefault(); 
 
     closeMatModal(); 
 
    }); 
 
    function closeMatModal(){ 
 
     $('#MatModal-container').removeClass('seeModal show-MatModal'); 
 
     setTimeout(function(){ 
 
      $('#MatModal-container').hide(150); 
 
     },550); 
 
    }; 
 
});

*{color:#fff;padding:0;margin:0;line-height:1.5em;} 
 
body, html{ 
 
    height:100%; 
 
    font-size:12px; 
 
    font-family: helvetiva, verdana, sans-serif; 
 
    background:#333; 
 
    overflow:hidden; 
 
} 
 
a {text-decoration:none;} 
 
ul, li {list-style:none;} 
 
p, h2 {margin-bottom:12px;} 
 
#nav-container { 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    padding:20px; 
 
    border-bottom:1px solid #3498db; 
 
    background:#2c3e50; 
 
    overflow:hidden; 
 
    box-sizing:border-box; 
 
    -moz-transition:350ms; 
 
    -webkit-transition:350ms; 
 
    transition:350ms; 
 
} 
 
#burger { 
 
    display:block; 
 
    position: relative; 
 
    width:25px; 
 
    height:25px; 
 
    text-indent:-9999px; 
 
    overflow:hidden; 
 
} 
 
#burger:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0.25em; 
 
    width: 100%; 
 
    height: 0.25em; 
 
    background: #fff; 
 
    box-shadow: 
 
    0 0.6em 0 0 #fff, 
 
    0 1.2em 0 0 #fff; 
 
} 
 
#nav-container ul { 
 
    display:block; 
 
    position:absolute; 
 
    top:0; 
 
    left:65px; 
 
    min-width:250px; 
 
    border-left:1px solid #34495e; 
 
    -moz-transition:350ms; 
 
    -webkit-transition:350ms; 
 
    transition:350ms; 
 
    opacity:1; 
 
} 
 
#nav-container ul li { 
 
    display:block; 
 
    float:left; 
 
    padding:0 10px; 
 
    border-right:1px solid #34495e; 
 
} 
 
#nav-container ul li a { 
 
    display:block; 
 
    height:65px; 
 
    line-height:65px; 
 
} 
 
#content { 
 
    padding:35px 110px; 
 
    width:100%; 
 
    height:100%; 
 
    margin:0 auto; 
 
    margin-top:65px; 
 
    overflow:auto; 
 
    box-sizing:border-box; 
 
    background:#2980b9; 
 
    -moz-transition:350ms; 
 
    -webkit-transition:350ms; 
 
    transition:350ms; 
 
} 
 
.MatModal { 
 
    display:block; 
 
    float:left; 
 
    margin-right:20px; 
 
    width:70px; 
 
    height:70px; 
 
    line-height:70px; 
 
    text-align:center; 
 
    color:#fff; 
 
    background:#3498db; 
 
    overflow:hidden; 
 
    -moz-transition:350ms; 
 
    -webkit-transition:350ms; 
 
    transition:350ms; 
 
    -moz-border-radius:50px; 
 
    -webkit-border-radius:50px; 
 
    border-radius:50px; 
 
} 
 
#MatModal-container { 
 
    display:none; 
 
    position:fixed; 
 
    width:70%; 
 
    height:180px; 
 
    top:28%; 
 
    left:15%; 
 
    overflow:hidden; 
 
    -moz-transition:350ms; 
 
    -webkit-transition:350ms; 
 
    transition:350ms; 
 
} 
 
#MatModal-container.seeModal { 
 
    top:25%; 
 
    -webkit-box-shadow: 0 3px 8px 2px rgba(0,0,0,0.2); 
 
    box-shadow: 0 3px 8px 2px rgba(0,0,0,0.2); 
 
} 
 
.MatRound { 
 
    display:block; 
 
    position:absolute; 
 
    width:1%; 
 
    height:0; 
 
    padding-top:1%; 
 
    top:50%; 
 
    left:50%; 
 
    background:#fff; 
 
    -moz-border-radius:10em; 
 
    -webkit-border-radius:10em; 
 
    border-radius:10em; 
 
    -moz-transition:850ms; 
 
    -webkit-transition:850ms; 
 
    transition:850ms; 
 
} 
 
.show-MatModal .MatRound { 
 
    width:150%; 
 
    padding-top:150%; 
 
    top:-25%; 
 
    left:-25%; 
 
} 
 
.MatModal-content { 
 
    display:block; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    opacity:0; 
 
    overflow:auto; 
 
    padding:30px; 
 
    -moz-transition:1s; 
 
    -webkit-transition:1s; 
 
    transition:1s; 
 
} 
 
.show-MatModal .MatModal-content {opacity:1;} 
 
.MatModal-content * {color:#999!important;} 
 
#close-MatModal { 
 
    display:block; 
 
    position:absolute; 
 
    top:20px; 
 
    right:20px; 
 
    color:#3498db; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="content"> 
 
    <h2>Material Modal</h2> 
 
    <a class="MatModal" href="#">Open</a> 
 
</div> 
 
<div id="MatModal-container"> 
 
    <span class="MatRound"></span> 
 
    <div class="MatModal-content"> 
 
     <a href="#" id="close-MatModal">Close</a> 
 
     <h1>Modal title</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p> 
 
    </div> 
 
</div>

來源

2017-10-14 07:24:46 mrid

謝謝。但我沒有得到任何答案，我的問題。如果我的代碼不受瀏覽器支持，如何運行你的代碼？ – unknown123

如果某些代碼不受瀏覽器支持，如何執行特定的代碼塊？

回答

相關問題