1

jqueryとhtmlを使ってテキスト横のアラートボックスにアイコンを追加したい

アラート ボックスは問題なく動作しますが、アイコンを追加しようとしたときに追加方法がわかりませんでした。だれか助けてください。

このコードでは、画像またはアイコンを追加する方法

jquery UI の使用

index.html

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css" />!-->

<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Download complete">
<p>
<!--<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>!-->
<span img src = "img1.jpg" style ="float: left; margin:0 7px 50px 0; width:50px; height:50px;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>
4

3 に答える 3

1

alert() は画像をレンダリングしません:-(

アラートで何を達成しようとしているのかについてさらに詳細を追加していただければ、適切な代替手段を考え出すことができます。

あなたはすでに jQuery を使っているので、興味があるかもしれません: http://jqueryui.com/dialog/

于 2013-09-11T20:41:07.010 に答える
0

あなたはブートストラップでこれを行うことができます、

ブートストラップをダウンロードし、

http://getbootstrap.com/

3 つのファイルをルート サイト フォルダーに追加します。

この人のブログから bootbox.js を入手してください。彼は実際にこれに関するチュートリアルも提供しています。ダウンロードしたファイルには、スタイル設定されたアラート ボックスの実例が含まれています。

http://creativitytuts.org/twitter-bootstrap-tutorial-15-bootbox-js-alert-dialogs/

次に、ブートストラップjqueryで実行された実際のアラートボックスを確認するには、このページに移動できます。最後の例は、まさにあなたが求めているものです...

http://bootboxjs.com/examples.html

これにより、あなたのイメージが得られます。私が抱えている唯一の問題は、画像のサイズを変更することです。しかし、これはおそらく私の側のエラーです。

これが役に立ったことを願っています！

コードの実際の例を次に示します。

HTML:

<div class="btn1">
<button>click me</button>
</div>
 <script type="text/javascript">

JS:

            $(document).ready(function(){
            $('.btn1').on('click', function(){
    var some_html = '<img class="alert" src="img/pic1.jpg" width="30px" /><br />';
    some_html += '<h2>You can use custom HTML too!</h2><br />';
    some_html += '<h4>Just be sure to mind your quote marks</h4>';
    bootbox.alert(some_html);               
                    });    
            });         
     </script>
于 2014-03-09T00:00:02.650 に答える
0

たぶん、このチュートリアルを見る必要があります: http://slayeroffice.com/code/custom_alert/

ダイアログ ボックスも役に立ちます: jquery のカスタム アラートと確認ボックス

于 2013-09-11T20:46:59.283 に答える