Question

我有一个JavaScript警报，通过单击#menit2返回警报，可以完美地满足我的要求，但我希望将警报的可视部分更改为在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);
}

Obs：我将脚本发布到PHP应用程序。

我希望有人可以帮助我..

我可以使用sweetalert对警报进行编程以获得更好的外观。现在我需要为#menu调用onClick函数。但我不能前进。

我的新剧本

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

我的新提醒：

Answer 1

您需要基本了解javascript的工作原理以及您正在查看的内容。

首先，您无法控制警报的外观。这些是内置的浏览器功能。

因此，为了管理它的外观，你正在使用jQuery UI Dialog这样的东西。

要使用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>

Answer 2

使用Sweet alert Jquery插件进行高度自定义的警报

Answer 3

我的代码是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>

这是MyAlert功能，可以使用javascript警告：

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

这是一个示例：

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

如何使用模态更好地保留警报？

3 个答案: