在样式化模式（jQuery UI）窗口中显示JS Alert [英] Displaying JS Alert in a styled modal (jQuery UI) window

问题描述

请参阅下面的代码......还有一个 在这里摆弄 。

See the code below... And there's a fiddle here.

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

I want to style this with a jQuery UI. However, will I still be able to call this script, or will I have to embed it directly in the HTML page?

这是表格......

<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（）。

Currently, when you search a PELL Grant Score, an alert() is called from another script.

脚本是这样构建的......

// 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页面？

Again - I want to style this with a jQuery UI. However, will I still be able to call this script, or will I have to embed it directly in the HTML page?

推荐答案

window.alert函数与jQuery UI对话无关;弹出窗口只是html。
切换到对话框的最简单方法是执行以下操作：

The window.alert function and the jQuery UI dialogue are not related; the popup is just html. The easiest solution to switching to a dialogue is to do the following:

• 在html中放置一个空白div


• 使用jQuery UI初始化它，autoOpen设置为false


• 而不是调用alert，将空白div的html替换为您将放入警报中的内容，然后显示jQuery对话框。

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

Before getting to my example, I have some general advice: don't ever put more than a single function inside an html tag. In general, try to keep your JavaScript and your html separate, as it'll make your (and anyone working with your code's) life easier. And since you're using jQuery, it's better to avoid JavaScript inside tags altogether by using the .on() function and binding your functions programmatically.

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

So I worked on your fiddle a bit, and got the jQuery UI dialog working. I also removed all the javascript from your html.

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

Lines 1-23 bind function to the form's onsubmit, the textbox's onfocus and onblur, and initializes the jQuery UI dialog (docs here).

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

Starting from Line 504, I've modified the alert to use the jQuery UI dialog. I did this by setting the old alert text as a variable and replacing the newlines with html linebreaks so they show up properly in the dialog. And then I inserted the content into the dialog and opened the dialog.

这是小提琴。

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

Let me know if it all makes sense to you, or if you have any questions :)

PS当你使用jQuery $（'＃pellscore'）。val（）比文件.getElementById（'pellscore'）短。值;）

P.S. When you use jQuery $('#pellscore').val() is way shorter than document.getElementById('pellscore').value ;)

所以这是你当前设置的问题：你正在使用（并依赖）一个荒谬的旧版本的reveal.js。我的猜测是你用google搜索jquery reveal并且遇到了这个链接到zurb版本的reveal.js 。如果这就是你得到它的方式，（大多数情况下，如果你从其他地方得到它）你可能没注意到a）它在两年内没有更新，b）它使用jQuery 1.4.4，这是三年份，或c）声明不再更新的粗体通知。

So here's the problem with your current setup: you're using (and relying on) a ridiculously old version of reveal.js. My guess is that you googled "jquery reveal" and came across this link to zurb's version of reveal.js. If that's how you got it, (and most definitely if you got it from somewhere else) you probably didn't notice that a) it hasn't been updated in two years, b) it uses jQuery 1.4.4, which is three years old, or c) the the bold notice that states that it won't be updated anymore.

无论哪种方式，你的分页的原因都是因为jquery.reveal。 js调用 .live ，自jquery 1.7以来已弃用，自1.9起完全删除。

Either way, the reason your page breaks is because jquery.reveal.js makes a call to .live, which is deprecated since jquery 1.7 and completely removed as of 1.9 .

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

I hate the idea of patching something that's two years old, but unless you want to rewrite a bunch of code and try integrating the current version of reveal.js (source), I recommend the following quick fix:

打开jquery.reveal.js，转到第20行，然后替换 .l ive ， .on ，例如
来自

Open up jquery.reveal.js, go to line 20, and replace .live with .on, e.g. from

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

到

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

这应该可以解决你的问题。我在本地尝试了它似乎有效。让我知道它是否适合你：）

That should fix your problem. I tried it locally and it seemed to work. Let me know if it works for you :)

这篇关于在样式化模式（jQuery UI）窗口中显示JS Alert的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！