显示带图像的警报框

Question

我想显示javascript警告框，我想用图像init显示此对话框。现在我得到警告框，如图所示  我想在再次尝试之前包含delete1.png图像。

       <SCRIPT LANGUAGE='JavaScript'>
       window.alert('Try again');
       </SCRIPT>

Answer 1

您无法在Javascript警告框中显示图片，它只能显示文字。您可以使用任何可用的ui库（如Bootstrap / jQuery / jQuery-UI等）实现modal。

您也可以参考this link获取一些输入。

Answer 2

无法将图像添加到alert（）。相反，你可以试试这个：

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var myWindow = window.open("", "MsgWindow", "width=200, height=100");
    myWindow.document.write("<img src='img.jpg'> This is 'MsgWindow'. I am 200px wide and 100px tall!");
}
</script>

Answer 3

您可以使用jQuery和
自己构建一个警告框 从元素的data- *属性中拉出警报框文本：

＆＃13;

＆＃13;

var $alertCov  = $("#alert-cover");
var $alertCont = $("#alert-content");
var $alertOK   = $("#alert > button");

$("[data-alert]").on("click", function(){
  $alertCont.html( $(this).data("alert") );
  $alertCov.stop().fadeIn(300);
});
$alertOK.click(function(){
  $alertCov.fadeOut(300);
});

＆＃13;

#alert-cover{
  display:none;
  background:rgba(0,0,0,0.3);
  position:fixed;
  left:0; right:0; top:0; bottom:0;
  width:100%;
  height:100%;
}
#alert{
  position:fixed;
  z-index:99999;
  background:#fafafa;
  max-width:280px;
  padding:10px 15px 15px;
  left:0;
  right:0;
  margin:20px auto;
  box-shadow:0 3px 3px rgba(0,0,0,0.3);
}
#alert > button{
  background:#ddd;
  border:0;
  padding:7px 15px;
  cursor:pointer;
  border-bottom:1px solid #aaa;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert-cover">
  <div id="alert">
    <div id="alert-content">
      Filled by data-* attribute
    </div>
    <button>OK</button>
  </div>
</div>
  
  
<a href="javascript:;" data-alert="
    <h2>Hello</h2>                                     
    <p><img src='//placehold.it/30x30/f0f'> World</p>
    "> Click me! </a>
  
<button data-alert="<p>Are you sure?</p>">click me!</button>

＆＃13;

＆＃13;

＆＃13;