如何讓我的警報更好看使用模態？

我有一個JavaScript警報，通過點擊＃menu2返回一個警報，完全符合我的要求，但是我想將警報的可視部分更改爲在Chrome瀏覽器中完美工作。爲此，我嘗試了幾次使用jQuery，Bootbox等等。所以我在這裏嘗試了一個更好的編程，使我的腳本更加用戶友好。如何讓我的警報更好看使用模態？

我試過使用，但無濟於事。

http://jqueryui.com/dialog/

http://bootboxjs.com/

其中前一個問題的其他選擇：

how to change the style of alert box

這裏是我的html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 

 
<ul id='menu'> 
 
    <li id='menu1'><a href='/web/front/helpdesk.public.php' title="Home" class='itemP'>Home</a> 
 
    </li> 
 
    <li id='menu2'><a href='/web/front/helpdesk.public.php' title="Cria um chamado" class='itemP'>Cria um chamado</a> 
 
    </li> 
 
    <li id='menu3'><a href='/web/front/ticket.php' title="Chamados" class='itemP'>Chamados</a> 
 
    </li> 
 
    <li id='menu4'><a href='/web/front/reservationitem.php' title="Reservas" class='itemP'>Reservas</a> 
 
    </li> 
 
    <li id='menu5'><a href='/web/front/helpdesk.faq.php' title="FAQ" class='itemP'>FAQ</a> 
 
    </li> 
 
</ul>

下面是我的javascript

"<script type='text/javascript'> 
 
      $(document).ready(function(){ 
 
      $('#menu2').click(function(event){ 
 
      event.preventDefault(); 
 
    
 
      alert('Text'); 
 
      }) 
 
      }); 
 
      </script>";

我對Chrome警示

我試圖做些什麼來改變我的戒備的視覺部分。

"<script type='text/javascript'> 
 
      $(document).ready(function() { 
 
      $('#menu2').dialog({ 
 
       e.preventDefault(); 
 
      }); 
 
      $('#menu2').click(function() { 
 
      }); 
 
     }); 
 
     </script>";

我不能在我的PHP代碼在這裏描述的示例程序。所以我貼了我的代碼的一部分，我有我的腳本工作。我要求您使用此處介紹的解決方案的代碼來提高我的理解。

if (Session::haveRight("ticket", CREATE)) { 
 
     $menu['create_ticket']['id']= "menu2"; 
 
      /*My alert of menu2*/ 
 
     echo "<script type='text/javascript'> 
 
      $(document).ready(function(){ 
 
      $('#menu2').click(function(event){ 
 
      event.preventDefault(); 
 
    
 
      alert('Text'); 
 
      }) 
 
      }); 
 
      </script>"; 
 
     $menu['create_ticket']['default'] = '/front/helpdesk.public.php?create_ticket=1'; 
 
     $menu['create_ticket']['title'] = __s('Create a ticket'); 
 
     $menu['create_ticket']['content'] = array(true); 
 
}

觀測值：我發出腳本PHP應用程序。

我希望有人能幫助我..

我可以編程使用sweetalert更好看的警報。現在我需要爲#menu調用onClick函數。但我無法前進。

我的新的腳本

echo '<script type="text/javascript">'; 
 
echo 'setTimeout(function() { swal("Return the alert test !","Message!","success");'; 
 
echo '}, 1000);</script>';

我的新警報：

來源

2016-11-26 Renato Lazaro

N非常理解你爲什麼說jQueryUI對話框不適合你。您可以按照自己想要的樣式設置對話框樣式，因爲它完全由普通HTML製成，而Alert功能使用系統默認樣式呈現對話框，該對話框很難用不同的樣式自定義。 – woodykiddy

我是編程的初學者，我無法使用上面的示例放置腳本。當我點擊菜單時，它不會返回警報。這可能是一件簡單的事情，但我不明白該怎麼做。 –

控制檯中是否有錯誤？在編寫javacript代碼時，一定要打開瀏覽器的開發者控制檯並學會使用該工具 - 它功能超強。 –

-1

使用甜警報jQuery插件高度定製警報

來源

2016-11-26 19:11:30

你能更好地解釋我嗎？ –

爲了更好的理解，請檢查訪問這個鏈接http://t4t5.github.io/sweetalert/ –

看看我的源代碼，看看你能否幫助我，我想一些時間，但沒有成功... https： //gist.github.com/Nerato/bd7a34eab929db61958c75b9f850d101 –

你需要得到怎樣的JavaScript作品的一個基本的瞭解，以及你在找什麼在。

首先，您無法控制警報的外觀/感覺。這些是內置的瀏覽器功能。

因此，爲了管理它的外觀，您正處於正確的軌道上，使用諸如jQuery UI對話框之類的東西。

要使用jQuery UI的對話框（https://jqueryui.com/dialog），你叫.dialog的元素，像這樣：

$('#my-dialog').dialog();

在你的情況，我懷疑你想使用它作爲一個「模確認書」，所以你應該閱讀這些文檔：https://jqueryui.com/dialog/#modal-confirmation

要使用這種方式，你通過傳遞某些參數觸發它：

$("#my-dialog").dialog({ 
    resizable: false, 
    height: "auto", 
    width: 400, 
    modal: true, 
    buttons: { 
    "Confirm": function() { 
     // ** DO THE THINGS YOU WANT when they confirm "Yes" here. 
     $(this).dialog("close"); 
    }, 
    Cancel: function() { 
     $(this).dialog("close"); 
    } 
    } 
});

ŧ軟管參數在javascript object的結構中，具有不同選項的名稱 - 值對。例如，以上resizable是一個選項名稱，並且false是值。一定要檢查出dialog API information知道所有的選項，方法等

因此，修改從你的問題的代碼（在這裏複製）：

<script type='text/javascript'> 
     $(document).ready(function() { 
     $('#menu2').dialog({ 
      e.preventDefault(); 
     }); 
     $('#menu2').click(function() { 
     }); 
    }); 
    </script>

爲了是這樣的：

<script> 
    jQuery(function ($) { 
     $('#menu2').click(function() { 
      $("#dialog-confirm").dialog({ 
       resizable: false, 
       height: "auto", 
       width: 400, 
       modal: true, 
       buttons: { 
       "Confirm": function() { 
         // ** DO THE THINGS YOU WANT when they confirm "Yes" here. 
         $(this).dialog("close"); 
       }, 
       Cancel: function() { 
         $(this).dialog("close"); 
       } 
       } 
      }); 
     }); 
    }); 
</script>

並且一定要在頁面上有標記來支持這個對話框。例如，將這樣的事情剛剛閉幕</body>標記之前：

<div id="dialog-confirm" title="Are you sure you want to do this?"> 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>You are about to do something. Are you sure?</p> 
</div>

來源

2016-11-26 15:01:45

cale！我試圖在我的www上宣傳你的例子，但我沒有從警報中回來。我在github中創建的示例。 https://gist.github.com/Nerato/f024a636fbbc6e23d1ff95714ea1b2aa –

-1

我的代碼的JavaScript代碼創建客戶端自定義警報。這是完成：

<style> 
    #alertContainer { 
     position: fixed; 
     width: 100vw; 
     height: 100vh; 
     z-index: 999; 
     background-color: rgba(0, 0, 0, 0.5); 
     display: none; 
    } 
    #alert { 
     width: 400px; 
     top: 0px; 
     right: 0px; 
     bottom: 0px; 
     left: 0px; 
     position: absolute; 
     margin: auto; 
     background-color: rgb(173, 173, 173); 
     padding: 30px; 
     max-width: 100vw; 
     height: 130px; 
    } 
    #ok { 
     position: absolute; 
     right: 30px; 
     bottom: 30px; 
    } 
</style>

的Html必須身體開始標記後複製：

<div id="alertContainer"> 
    <div id="alert"> 
     <span id="alertText"> Hello</span> 
     <input id="ok" value="ok" onclick="$('#alertContainer').hide();" type="button"> 
    </div> 
</div>

這是insted的的JavaScript警告使用MyAlert功能：

function MyAlert(text) 
    { 
     document.getElementById('alertContainer').style.display = "block"; 
     document.getElementById('alertText').innerHTML = text; 
    }

，這是一個樣品：

<a onclick="MyAlert('How are you')">alert</a>

來源

2016-11-26 21:30:11

如何讓我的警報更好看使用模態？

回答

相關問題