初始加载时的单模对话框

Question

New to JQuery and web dev in general. 一般而言，JQuery和Web开发人员是新手。 I have been trying to get the confirm override simplemodal demo to work, so that it pops up with on alert on initial load of my site. 我一直在尝试使确认重写simplemodal演示正常工作，以便在我的站点的初始负载出现警告时弹出。

The below is the standard sample, but I have included the $(document).ready() function to try and fire the modal dialog on startup. 以下是标准示例，但是我包含了$(document).ready()函数，以尝试在启动时触发模式对话框。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('#confirm-dialog').modal();       
    });
</script>
</head>
<body>
<div id='container'>

    <div id='content'>
        <div id='confirm-dialog'>
            <input type='button' name='confirm' class='confirm' value='Demo'/> 
        </div>

        <!-- modal content -->
        <div id='confirm'>
            <div class='header'><span>Confirm</span></div>
            <div class='message'></div>
            <div class='buttons'>
                <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
            </div>
        </div>
        <!-- preload the images -->
        <div style='display:none'>
            <img src='img/confirm/header.gif' alt='' />
            <img src='img/confirm/button.gif' alt='' />
        </div>
    </div>
</div>

</body>
</html>

However, this does not fire, and from what my limited experience with Firebug, I cannot see any errors so must be my code logic that is the issue? 但是，这不会触发，从我对Firebug的有限经验来看，我看不到任何错误，因此问题所在的代码逻辑必须吗？

Answer 1

It works for me in JSFiddle . 它在JSFiddle中对我有用。 What about using .dialog method of jquery UI library: 如何使用jquery UI库的.dialog方法：

<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.ui.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('#confirm-dialog').dialog({modal: true});       
    });
</script>
</head>
<body>
<div id='container'>

<div id='content'>
    <div id='confirm-dialog'>
        <input type='button' name='confirm' class='confirm' value='Demo'/> 
    </div>

    <!-- modal content -->
    <div id='confirm'>
        <div class='header'><span>Confirm</span></div>
        <div class='message'></div>
        <div class='buttons'>
            <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
        </div>
    </div>
    <!-- preload the images -->
    <div style='display:none'>
        <img src='img/confirm/header.gif' alt='' />
        <img src='img/confirm/button.gif' alt='' />
    </div>
</div>
</div>

</body>
</html>

You can download jquery.ui file from here 您可以从这里下载jquery.ui文件

初始加载时的单模对话框

问题描述

1 个解决方案

解决方案1
1 2012-03-12 08:01:15

初始加载时的单模对话框

问题描述

1 个解决方案

解决方案1 1 2012-03-12 08:01:15

解决方案1
1 2012-03-12 08:01:15