在样式模式 (jQuery UI） 窗口中显示 JS 警报

Displaying JS Alert in a styled modal (jQuery UI) window

本文关键字：窗口 显示 JS 警报 UI 样式 模式 jQuery      更新时间：2023-09-26

请参阅下面的代码...这里有一个小提琴。

我想用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 格兰特分数时，会从另一个脚本调用 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 页面中？

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

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

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

所以我在你的小提琴上做了一些工作，并让jQuery UI对话框工作。我还从你的html中删除了所有的javascript。

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

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

这是小提琴。

让我知道这一切对您来说是否有意义，或者您是否有任何疑问:)

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

更新

问题所在

所以这就是你当前设置的问题：你正在使用（并依赖）一个荒谬的旧版本的 reveal.js。我的猜测是，你在谷歌上搜索了"jquery reveal"，并发现了这个链接到zurb版本的reveal.js。如果这就是你得到它的方式，（而且肯定是如果你从其他地方得到它）你可能没有注意到 a） 它在两年内没有更新，b） 它使用 jQuery 1.4.4，这是三年前的，或者 c） 粗体通知，说明它不会再更新了。

无论哪种方式，您的页面中断的原因都是因为 jquery.reveal.js 调用了 .live ，自 jquery 1.7 以来已弃用，并从 1.9 开始完全删除。

解决方案

我讨厌修补两年前的东西的想法，但除非你想重写一堆代码并尝试集成当前版本的 reveal.js（来源），否则我建议以下快速修复：

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

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

自

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

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

相关文章：