如何让我的警报更好看使用模态？

我有一个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

如何让我的警报更好看使用模态？

回答

相关问题