javascript - 在样式化模态 (jQuery UI) 窗口中显示 JS 警报

Question

请参阅下面的代码...其中有一个 fiddle here 。

我想使用 jQuery UI 设计它的样式。但是，我仍然可以调用此脚本，还是必须将其直接嵌入到 HTML 页面中？

这是表格...

<div class="search-pell">
<form onsubmit="showpell_13_14(document.getElementById('pellscore').value); return false;">
    <input type="text" value="Enter 13-14 PELL Score" onfocus="if(this.value == 'Enter 13-14 PELL Score') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Enter 13-14 PELL Score'; }" class="search-input-bg-pell" id="pellscore"  />
    </form>

目前，当您搜索 PELL Grant 分数时，会从另一个脚本调用alert()。

脚本是这样构建的...

// Begin EFC Calculator for 2013-2014

function showpell_13_14(efc) {


  var pell;
  var ssg;
  var estpay;
  var monthpay;

    if (efc == 0) {
        pell = 5645;
        ssg = 0;
        estpay = -573;
        monthpay = 0;
    }

    else if (efc <= 100) {
        pell = 5595;
        ssg = 0;
        estpay = -523;
        monthpay = 0;
    }

    else if (efc <= 200) {
        pell = 5495;
        ssg = 0;
        estpay = -423;
        monthpay = 0;
    }

...根据此显示结果...

alert('Based on the 2013-2014 EFC you entered ('+efc+'), you may receive...'
                +' \n_________________________________________________________'
                +' \n-Tuition of 36 credits: $14,472' 
                +' \n_________________________________________________________'
                +' \n-Direct Loan maximum for a Freshman* student: $9,405**' 
                +' \n_________________________________________________________'             
                +' \n-Potential PELL Grant Award: $'+pell+'.'
                +' \n_________________________________________________________'
                +' \n-Your estimated total out of pocket payment: $'+estpay+'.'
                +' \n_________________________________________________________'
                +' \n-Potential Student Success Grant: $'+ssg+'.'
                +' \n_________________________________________________________'                 
                +' \n-Your estimated monthly out of pocket payment: $'+monthpay+'.'
                +' \n...'
//              +' \nIf your student has $0 out of pocket, disregard the next few lines...'
//                +' \n_________________________________________________________'                               
//              +' \n-Your estimated monthly payment is calculated by...'
//              +' \n'
//              +' \nTaking your total out of pocket for the year ($'+estpay+')'
//              +' \nand subtracting your Student Success Grant ($'+ssg+') to get'
//              +' \n your overall payment which is then broken up over 9 months'
//              +' \nand comes to $'+monthpay+' per month.'                                                                                                         
                +' \n_________________________________________________________'
                +' \n *Note: This is only configured for 1st year undergraduate students.'  
                +' \n **Loan fees of 1% are included in the loan rates listed on this sheet.');

再次 - 我想使用 jQuery UI 对其进行样式设置。但是，我仍然可以调用此脚本，还是必须将其直接嵌入到 HTML 页面中？

Answer 1

window.alert函数和jQuery UI对话框不相关；弹出窗口只是 html。切换到对话的最简单的解决方案是执行以下操作:

• 在 html 中放置一个空白 div
• 使用 jQuery UI 初始化它，并将 autoOpen 设置为 false
• 不要调用警报，而是将空白 div 的 html 替换为您要放入警报中的内容，然后显示 jQuery 对话框。

在开始我的示例之前，我有一些一般性建议:不要在 html 标记内放置多个函数。一般来说，尽量将 JavaScript 和 html 分开，因为这会让您(以及使用您的代码的任何人)的生活更轻松。由于您使用的是 jQuery，因此最好通过使用 .on() 函数并以编程方式绑定(bind)函数来完全避免在标记内使用 JavaScript。

所以我对你的 fiddle 做了一些工作，并使 jQuery UI 对话框正常工作。我还从您的 html 中删除了所有 JavaScript。

第 1-23 行将函数绑定(bind)到表单的 onsubmit、文本框的 onfocus 和 onblur，并初始化 jQuery UI 对话框(文档 here )。

从第 504 行开始，我修改了警报以使用 jQuery UI 对话框。我通过将旧的警报文本设置为变量并用 html 换行符替换换行符来实现此目的，以便它们在对话框中正确显示。然后我将内容插入到对话框中并打开对话框。

这是Fiddle .

如果您觉得这一切有意义，或者您有任何疑问，请告诉我:)

附注当您使用 jQuery 时 $('#pellscore').val() 比 document.getElementById('pellscore').value 短得多 ;)

更新

问题

因此，您当前的设置存在问题:您正在使用(并依赖)reveal.js 的旧版本。我的猜测是，您在谷歌上搜索“jquery Reveal”并发现了 this link to zurb's version of reveal.js 。如果这就是你得到它的方式，(如果你从其他地方得到它的话)你可能没有注意到 a)它已经两年没有更新了，b)它使用 jQuery 1.4.4，这是三个岁，或 c) 粗体通知，表明它将不再更新。

无论哪种方式，页面中断的原因是 jquery.reveal.js 调用了 .live，该调用自 jquery 1.7 起已弃用，并从 1.9 起完全删除。

解决方案

我讨厌修补两年前的东西，但除非你想重写一堆代码并尝试集成 current version of reveal.js ( source )，我建议以下快速修复:

打开jquery.reveal.js，转到第20行，并将.live替换为.on，例如来自

$('a[data-reveal-id]').live('click', function(e)

至

$('a[data-reveal-id]').on('click', function(e)

这应该可以解决你的问题。我在本地尝试了一下，似乎有效。让我知道它是否适合您:)