Question

我尝试使用javascript进行自定义提醒，在一个函数中，您要将其重定向到哪里。这就是我所拥有的：

function CustomAlert(){
this.render = function(dialog, redirect){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";

dialogbox.innerHTML = "<div id='dialogboxhead'><img src="/images/logo.png"></img></div> +
    "<div id='dialogboxbody'>" + dialog + "</div>" +
    "<div id='dialogboxfoot'><div class='alertokbtn'><button onclick='Alert.ok('" + redirect + "')'>OK</button></div></div>";

}
this.ok = function(redirect){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";

window.location = redirect;
}
}
var Alert = new CustomAlert();

这是我在HTML中建立以运行该功能的原因：

<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
     <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>    

<button class="button" onClick="Alert.render('Alert test. This text can be anything by the way', 'https://google.com');" id="btn1">Get alert</button>

它打开带有文本和所有内容的功能，但是当我按下确定时，它不会重定向我。

Answer 1

以下是代码，您可以尝试

＆＃13;

function getObj(ID){
  return document.getElementById(ID);
}

function CustomAlert(){
  this.render = function(dialog, redirect){
	getObj('dialogoverlay').style.display = 'block';
	getObj('dialogboxbody').innerHTML = dialog;
	getObj('dialogboxfoot').innerHTML = "<button id=\"left\" onclick=\"Alert.ok('"+redirect+"')\">OK</button> <button id=\"right\" onclick=\"Alert.close()\">Close</button>";
  }
  this.ok = function(redirect){
	window.location = redirect;
  }

  this.close = function(){
	getObj('dialogoverlay').style.display = "none";
  }
}
var Alert = new CustomAlert();

＆＃13;

body{
  margin: 0px;
  padding: 0px;
}
#dialogoverlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,.2);
  display: none;
  text-align: center;
}
#dialogbox{
  z-index: 9999;
  width: 300px;
  height: 200px;
  padding: 10px;
  background: white;
  margin: 100px auto;
}
#dialogboxhead img{
  width: 100px;
  margin: 30px 10px 10px 10px;
}
#dialogboxfoot{
  overflow: hidden;
  background: rgba(0,0,0,.1);
  padding: 5px;
}
#left{
  float: left;
}
#right{
  float: right;
}

＆＃13;

<div id="dialogoverlay">
  <div id="dialogbox">
    <div>
      <div id="dialogboxhead">
        <img src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
      </div>
      <p id="dialogboxbody"></p>
      <div id="dialogboxfoot"></div>
    </div>
  </div>
</div>

<button class="button" onClick="Alert.render('Alert test. This text can be anything by the way', 'https://google.com');" id="btn1">Get alert</button>

＆＃13;

注意：将此代码用于您的脚本。因为，在Snippet window.location功能不起作用。

Answer 2

请尝试以下代码：

＆＃13;

function CustomAlert(){
  this.render = function(dialog, redirect){
    var winW = window.innerWidth;
    var winH = window.innerHeight;
    var dialogoverlay = document.getElementById('dialogoverlay');
    var dialogbox = document.getElementById('dialogbox');
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH+"px";
    dialogbox.style.left = (winW/2) - (550 * .5)+"px";
    dialogbox.style.top = "100px";
    dialogbox.style.display = "block";

    dialogbox.innerHTML = `<div id='dialogboxhead'><img src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"></img></div>
        <div id='dialogboxbody'>${dialog}</div>
        <div id='dialogboxfoot'><div class='alertokbtn'><button onclick='Alert.ok("${redirect}")'>OK</button></div></div>`;

    }
    this.ok = function(redirect){
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";

    window.location = redirect;
  }
}
var Alert = new CustomAlert();

＆＃13;

<div id="dialogoverlay">
  <div id="dialogbox">
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>
		 
<button class="button" onClick="Alert.render('Alert test. This text can be anything by the way', 'https://google.com');" id="btn1">Get alert</button>

＆＃13;

使用InnerHTML的Javascript函数不起作用

2 个答案: