Question

我有兴趣创建像这样的小对话框，我不想使用alert

我需要javascript，看起来应该是这样的

 function dailog(title,text,newid,script_include)
 {
   // here html include part should come,
    <script src=script_include<script/>
    <div id=newid title=title >
     <p> text</p>
    </div>

  // once its created print dialog in current window
 }

我想这样打电话

<li id="myid" onclick="dailog('mytitle','you clicked this','mycssid','/path/to/jquery-1.9.1.js')"</li>

抱歉英语不好，我希望你们能理解我想要达到的目标。

Answer 1

对我来说更好的解决方案是使用JqueryUI

https://jqueryui.com/dialog/

外观

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>

Answer 2

我想你想要这个：

http://jsfiddle.net/easwee/aJatf/

<script>
function dialog(title, text, newid, script_include)
{   
    document.body.innerHTML += '<script src="' + script_include + '"><\/script>';
    document.body.innerHTML += '<div id="' + newid + '"  title="' + title + '"><p>' + text + '</p></div>';
}
</script>
<ul>
    <li id="myid" onclick="dialog('mytitle', 'you clicked this','mycssid','/path/to/jquery-1.9.1.js');">My li</li>
</ui>

编辑：

使用多个脚本路径：

http://jsfiddle.net/easwee/8d7Fj/

<script>
function dialog(title, text, newid, script_include)
{
    for(i=0; i < script_include.length; i++) {
        document.body.innerHTML += '<script src="' + script_include[i] + '"><\/script>';
    }
    document.body.innerHTML += '<div id="' + newid + '"  title="' + title + '"><p>' + text + '</p></div>';
}
</script>
<ul>
    <li id="myid" onclick="dialog('mytitle', 'you clicked this','mycssid', ['/path/to/jquery-1.9.1.js','/path/to/anotherscript.js']);">My li</li>
</ui>

Answer 3

这应该有效：

var dialog = function(title, text, newid, script_include) {
    // create script element and add it to your page
    var js = document.createElement("script");
    js.src = script_include;
    document.body.appendChild(js);

    // create the dialog box and append it
    var div = document.createElement("div");
    div.id = newid;
    div.title = title;
    var p = document.createElement("p");
    p.appendChild(document.createTextNode(text));
    div.appendChild(p);
    document.body.appendChild(div);
};

是否可以在javascript中创建小对话框onclick not alert

3 个答案: