Question

<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>

我在我的网络应用程序中使用上述材料设计组件。该对话框与某些浏览器不兼容。如果浏览器不支持上述代码，我需要运行以下代码。我试过阅读功能检测文档但需要很多先决条件。

<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>

Answer 1

注意：此答案使用jQuery javascript库。

＆＃13;

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);
    };
});

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

如果浏览器不支持某些代码，如何执行特定的代码块？

1 个答案: