Question

我需要使用这样的css关闭我的模态：http://jsfiddle.net/raving/1mhsynmw/

然而，我无法让它发挥作用。我的模式如下。

＆＃13;

String a = new String("whatever");
String b = new String(a);
System.out.println(a == b); // false, they are not the same instance
System.out.println(a.equals(b)); // true, they represent the same string
System.out.println(a.hashCode() == b.hashCode()); // true, they represent the same string

＆＃13;

function alert(msg) {
	document.getElementById("alert").innerHTML = '<div class="modal-overlay"><div class="modal"><div class="modal-container"><h3>' + msg + '</h3><p>' + msg + '</p></div><p class="modal-footer"><a href="javascript:" id="ok">OK</a></p></div>';
}

alert("This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal.");

＆＃13;

body {
  font-family:arial;
  font-size:11px;
}
.modal {
     position: fixed;
     top: 20px;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
     width: 200px;
     box-shadow: 0 4px 6px 1px rgba(50, 50, 50, 0.14);
     background: #fff;
}
.modal p {
	 cursor:default;
}
.modal-container {
	 padding: 10px;
}
.modal p a {
	 color:#555;
}
.modal-footer a {
	 display:block;
	 border:1px solid #eee;
	 width:9.5%;
	 padding:3px;
	 background:#fff;
	 text-decoration:none;
	 float:right;
}
.modal-footer {
     background: #fafafa;
     border-top: 1px solid #eee;
     margin-bottom: 0px;
	 margin-top:0px;
	 padding:8px;
	 height:25px;
}
.modal h3 {
	 margin:0px;
	 white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 175px;
}
.modal-last {
	 padding-bottom:0px;
}
.modal-overlay:before {
     content: '';
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
}

＆＃13;

问题：有没有办法在不使用Javascript的情况下关闭模态？并且这是不可能的，我如何使用Javascript关闭此模式？

Answer 1

如果您不想在单击“确定”按钮时使用JQuery关闭模式，则可以使用纯JavaScript执行类似于以下代码的操作。您必须为选择器分配索引才能使其生效。

    //begin click event
    document.getElementById("ok").addEventListener("click",function(event){


    /* Hide the element with a class name of modal.
       note:If there is more than one element with the class name
       modal then this code will only select the first one in the
       collection of elements 
    */

    document.getElementsByClassName("modal")[0].style.display = "none";


       });//end click event

Answer 2

基于你的js代码，如果你想要摆脱它，最简单的方法是使用空字符串document.getElementById("alert").innerHTML = 'modal stuff'

CSS方式类似document.getElementById("alert").innerHTML = ''。

你应该关闭它的正确方法，通过调用javascript close函数，这将删除模态并清理自己（所以旧的代码不再存在）。此方法取决于模态的类型以及您要实现的目标。

Answer 3

我不相信在单击“确定”按钮时，只有css方法可以关闭/隐藏模态。但是，用普通的Javascript关闭它应该很容易。根据您是否要隐藏模态（但保留在DOM中），或者实际删除模态元素，您可以像这样实现它。

 // To hide, run this inside a click callback
 document.getElementById('modal').classList.push('hide');

 .hide {
   display: hidden;
 }



 // And to remove
 var modal = document.getElementById('modal');
 modal.parentNode.removeChild(modal);

此外，你必须在你的模态中添加一个#modal id，而不仅仅是一个类（除非你想使用document.getElementsByClassName）

仅使用CSS关闭模态

3 个答案: