简单的模态和 Javascript 调用答案

【问题标题】：Simple Modal and Javascript Call简单的模态和 Javascript 调用
【发布时间】：2012-07-11 07:47:58
【问题描述】：

我创建了一个简单的模态弹出对话框，如果你点击它就可以正常工作

    <a href='#' class='confirm'>Demo</a>

但是我如何在 Javascript 中调用这个“确认”css 类。我试过了……

    <script language="JavaScript" type="text/JavaScript">
       $(".confirm").click();
       ** Also tried this to but no good... **
       document.getElementsByTagName('body')[0].className = 'confirm';
    </script>

但是没有用。我确信这很容易做到，但似乎无法做到。

谢谢，

弗兰克 G.

***这是我正在使用的脚本*** ******** SimpleModal 确认模态对话框

    <!-- Page styles -->
    <link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />

    <!-- Confirm CSS files -->
    <link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />


    <!-- JS files are loaded at the bottom of the page -->
    </head>
    <body>
    <div id='container'>
<div id='logo'>
    <h1>Simple<span>Modal</span></h1>
    <span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
    <div id='confirm-dialog'>
        <h3>Confirm Override</h3>
        <p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of the <code>onShow</code> callback as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
        <input type='button' name='confirm' class='confirm' value='Demo'/> or <a href='#' class='confirm'>Demo</a>
    </div>

    <!-- modal content -->
    <div id='confirm'>
        <div class='header'><span>Confirm 123</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>


    <!-- Load JavaScript files -->
    <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 type="text/javascript">
  $('.confirm').dialog({modal:true});
      $('.confirm').modal();
  $(".confirm").click();

    $(document).ready(function(){
   $('.confirm').dialog({modal:true});
       $('.confirm').modal();
   $(".confirm").click();
     });

    </script>

    </body>
    </html>

【问题讨论】：

肯定the documentation 告诉您如何以编程方式打开模式？
旁注：省略脚本标签上的语言属性，即deprecated since long time
提示：您要查找的方法以m 开头，以odal 结尾；)
您是想在 DOM 准备好之前运行该代码，还是在将点击处理程序绑定到它以执行模态操作之前运行该代码？因为在一般意义上，这正是您以编程方式触发点击的方式，如下所示：jsfiddle.net/ezs4j
@user1227427：我没用过Simple Modal，我只是看了一下文档。再读一读，不仅仅是点击链接。

标签： javascript jquery

【解决方案1】：

也许你可以试试这个 jquery 解决方案：

$("style[type=text/css]").text('@import url("*.css");');

【讨论】：

@SheikhHeera 我正在创建一个提醒页面。我从数据库加载数据，如果该数据的任何位有超过日期的提醒，那么我想通过弹出 jquery 框来提醒用户。因此，理想情况下，我将解析数据库，然后使用 javascript 执行 if，如果为 true，则调用 jquery 框。这就是我遇到问题的地方。

【解决方案2】：

要在页面加载时调用它，只需在文档中调用它就可以了

$(document).ready(function(){
    $('#modal_div_id').modal(); // Id would be better (#confirm)
});

这将在页面加载时调用它。确保您在名为confirm 的页面上只有一个class。

Documentation.

A fiddle here.

【讨论】：

我试过了，但没有用。还有其他建议吗？再次感谢您的努力 :) 如果我单击超链接 a href='#' class='confirm'>Demo 它会弹出框，那么脚本再次工作它已经过测试。
如果有人想玩一下我在这里使用的简单模式，请点击链接：ericmmartin.com/projects/simplemodal-demos
Hera 是在就绪事件中调用某事的示例，但它使用 jquery ui 对话框，但逻辑相同。 Link here.
是的，但我正在做你给我的事情，它没有弹出窗口。我不知道为什么还有其他建议。您看到我在页面顶部发布的脚本了吗？
把你弹出的电话script放在所有其他script的底部。