Question

我想在点击JS对象时使用Javascript打开Modal框。我可以使用HTML和CSS正常打开它但不使用JS。 JS创建了一个Circle，我想点击它来打开Modal或Flyouts http://jsfiddle.net/7sty4jaL/ HTML

<body>

        <h3 id="region-name"></h3>
        <div class="modalopener" ><a href="#openModal">1111111111111</a></div>

            <div id="openModal" class="modalDialog">
                <div class="modal">
                    <a href="#close" title="Close" class="close">X</a>
                    <h2>Modal Box</h2>
                </div>
            </div>
    </body>

CSS

.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close:hover { background: #00d9ff; }

JS

for (var i = 0; i < array.length; i++) {
        array.click(function(e){

        });
    }

Answer 1

您只需使用以下命令从任何其他JS文件调用DIV id：

document.getElementById("openModal").click();

将搜索DOM并获取ID。模态弹出窗口按预期打开。

Answer 2

您可以将.modalDialog:target的样式规则应用于可以使用javascript定位的类（例如mTarget）。

;(function(w,d,undefined){
  "use strict";
  
  var toggleModal = function(){
    d.getElementById('openModal').classList.toggle('mTarget');
  };
  
  var t = w.setInterval(toggleModal,1000);
  
})(window,document);

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target, .mTarget {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}

<body>

  <h3 id="region-name"></h3>
  <div class="modalopener"><a href="#openModal">1111111111111</a>
  </div>

  <div id="openModal" class="modalDialog">
    <div class="modal">
      <a href="#close" title="Close" class="close">X</a>
      <h2>Modal Box</h2>
    </div>
  </div>
</body>

如何在另一个文件中通过JS调用DIV Id

2 个答案: