对话框没有出现在页面加载上

时间:2013-09-01 18:13:15

标签: php javascript jquery dialog jquery-ui-dialog

我有一个将数据插入数据库的php页面,插入后重定向到另一个页面,我希望在插入数据时我可以向用户显示一个对话框,插入需要大约2分钟,所以我写了这个页面开头的代码

    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/jquery-ui-1.10.2.custom.min.js"></script>

    <link rel="stylesheet" href="../css/jquery-ui.css" />
</head>
<script>
    function dialogsf() {
        $("#loadingsf").dialog({
            hide: 'slide',
            show: 'slide',
            autoOpen: true
        });
        $("#loadingsf").dialog('open').html("<p>Please Wait...</p>");
        alert("dfsd");
    }

    window.onload = function() {
        dialogsf();
    };
</script>
<body>
    <div id="loadingsf" title="Import"> 
        <p>Please wait ...</p>
    </div>

插入时没有出现对话框,我试过javascript:dialogsf();从URL选项卡然后我可以看到对话框,我错过了什么?

2 个答案:

答案 0 :(得分:0)

请尝试以下脚本。对话框中打开了<p></p>标记。

function dialogsf() {
        $("#loadingsf").dialog({
            hide: 'slide',
            show: 'slide',
            autoOpen: true
        });

        $("#loadingsf").dialog('open').html("Please Wait...");

    }

$(function () {
    dialogsf();
    });

在这里查看jsfiddle http://jsfiddle.net/parixit572/WNQ3B/1/

答案 1 :(得分:0)

  

注意:这是一个“暗示”答案,仅供参考。

这是我在上传文件时使用的内容,它适用于我,你可以根据这个想法。

当所有内容发生时出现的弹出框会在我的上传完成后自动消失,并且也可以为您效果。

HTML

<div id="load" style="display:none;"><br><br>Uploading... Please wait.<br><hr><br>Do not close this window until it has finished.</div>

<form action="upload.php" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1" name="form1" id="form1" onsubmit="return checkFields();">

<input type="submit" name="Submit" value=" Click here to UPLOAD when ready " />

CSS

<style type="text/css">
#load{
position:absolute;
z-index:1;
border:3px double #999;
background:#f7f7f7;
width:300px;
height:300px;
margin-top:-150px;
margin-left:-150px;
top:50%;
left:50%;
text-align:center;
font-family:"Trebuchet MS", verdana, arial,tahoma;
font-size:18pt;
}
</style>

JS

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
var ray={
ajax:function(st)
    {
        this.show('load');
    },
show:function(el)
    {
        this.getID(el).style.display='';
    },
getID:function(el)
    {
        return document.getElementById(el);
    }
}
</script>