Question

一般来说，JQuery和Web开发新手。我一直试图让确认覆盖simplemodal演示工作，以便在我网站的初始加载时弹出警报。

下面是标准示例，但我已经包含了$(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>

然而，这并没有解决，而且根据我对Firebug的有限经验，我看不出任何错误，所以必须是我的代码逻辑才是问题？

Answer 1

它适用于我JSFiddle。如何使用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>

您可以从here

下载jquery.ui文件

初始加载时的simplemodal对话框

1 个答案: