更新

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
而不是调用alert，将空白div的html替换为您将放入警报的内容，然后显示jQuery对话框。

在开始我的例子之前，我有一些一般的建议：不要在html标签中放置多个函数。一般来说，尽量让你的JavaScript和你的html分开，因为它会让你（以及任何使用你代码的人）生活更轻松。因为你正在使用jQuery，所以最好通过使用.on()函数并以编程方式绑定函数来完全避免使用JavaScript内部的JavaScript。

所以我对你的小提琴做了一些工作，并使jQuery UI对话框正常工作。我还从你的HTML中删除了所有的javascript。

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

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

这是Fiddle。

请告诉我这一切是否对您有意义，或者如果您有任何疑问：）

P.S。使用jQuery时$('#pellscore').val()比document.getElementById('pellscore').value;）

短

更新

问题

所以这就是你当前设置的问题：你正在使用（并依赖）一个荒谬的旧版本的reveal.js。我的猜测是你用google搜索“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），我建议您使用以下快速修复：< / p>

打开jquery.reveal.js，转到第20行，然后将.live替换为.on，例如从

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

到

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

那应该可以解决你的问题。我在当地尝试过它似乎工作。让我知道它是否适合你：）

在样式化模式（jQuery UI）窗口中显示JS Alert

1 个答案:

更新

问题

解决方案