Question

请参阅我的 Sample Fiddle ...

我希望JavaScript警报弹出为jQuery UI对话框，因为我想要设置样式。由于@asifrc的一些帮助，我得到了这个工作。

现在，我正在尝试设置该对话框。

这就是我对HTML中的提示框所拥有的内容......

<div id="pellalert"></div>
<div class="search-pell">
    <form id="pellform">
        <input type="text" value="Enter 13-14 PELL Score" class="search-input-bg-pell" id="pellscore"  />
    </form>        
</div>

我在这里唯一可以做的就是整个对话框应用一个内联样式，就像这样......

<div id="pellalert" style="font-size: 18px;"></div>

...但是整个盒子的样式，而不仅仅是我想要的样式。如何制作<h1>，<h2>等，或在行之间添加多个<br />等等...是否有一种整体方式可以设置此样式？

这就是我设置警报脚本的方法，但我不知道如何在这里添加样式......

/*
    Pell Alert
*/
//Set content to old alert content      
var content = 'Based on the 2013-2014 EFC you entered ('+efc+'), you may receive...'
            +' \n'
            +' \n'
            +' \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...'
    //Replace newlines with <br> (since it's now html)
    content = content.replace('\n', '<br>');
    //Set innerHTML of dialog, and then show the dialog     
    $('#pellalert').html(content).dialog('open');

}

Answer 1

如果你需要保留当前的编码，你必须直接创建一个真正的“DOM字符串”。

类似的东西：

var content = '<div class="title">Based on the 2013-2014 EFC you entered ('+efc+'), you may receive...</div>'
            +'<div class="credits">Tuition of 36 credits: $14,472</div>' ;

等等......

如果你可以改变它的实现方式，你应该因为这段代码不够可读（这意味着不够可维护）。

一个选项是将你的字符串分成函数...例如，每个函数接受一个参数或一些参数，显示一行或一个块，使用参数...然后将不同函数调用的结果附加到构建你的DOM。我不能真正展示这样一个函数的例子，因为我不知道你的“业务逻辑”需求。但您可以区分消息中的各个区域，并为每个区域创建功能。但是，这仍然非常复杂，不应该这样做。

最好的选择是进行Ajax调用以检索php文件，提供服务器所需的所有参数，而不是在javascript中构建所有内容。那会更清洁。而且你会更容易操纵DOM。

设置在jQuery UI对话框中弹出的JS警报

1 个答案: