javascript jquery - كيفية تغيير نمط مربع التنبيه




5 Answers

مربع التنبيه هو كائن نظام ، ولا يخضع إلى CSS. للقيام بهذا النمط من الأشياء ، ستحتاج إلى إنشاء عنصر HTML وتقليد وظيفة alert() . يعمل مربع jQuery UI Modal على الكثير من العمل نيابة عنك ، حيث يعمل بشكل أساسي كما وصفته: Link .

css animation

أحتاج إلى تغيير نمط الزر "موافق" في مربع التنبيه.

<head>
    <script type="text/javascript">
        function show_alert() {
            alert("Hello! I am an alert box!");
        }
    </script>
</head>
<body>
    <input type="button" onclick="show_alert()" value="Show alert box" />
</body>




أستخدم SweetAlert ، إنه رائع ، ستحصل على الكثير من خيارات التخصيص بالإضافة إلى جميع عمليات الاسترجاعات

swal("Here's a message!", "It's pretty, isn't it?");




تحتاج إلى إنشاء مربع التنبيه الخاص بك مثل هذا:

function jAlert(text, customokay){
	document.getElementById('jAlert_content').innerHTML = text;
    document.getElementById('jAlert_ok').innerHTML = customokay;
    document.body.style.backgroundColor = "gray";
    document.body.style.cursor="wait";
}



jAlert("Stop! Stop!", "<b>Okay!</b>");
#jAlert_table, #jAlert_th, #jAlert_td{
    border: 2px solid blue;
    background-color:lightblue;
    border-collapse: collapse;
    width=100px;
}

#jAlert_th, #jAlert_td{
    padding:5px;
    padding-right:10px;
    padding-left:10px;
}

#jAlert{
    /* Position fixed */
    position:fixed;
    /* Center it! */
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}
<p>TEXT</p>
<div id="jAlRem">
    <div id="jAlert">
        <table id="jAlert_table">
            <tr id="jAlert_tr">
                <td id="jAlert_td">  <p id="jAlert_content"></p>  </td>
                <td id="jAlert_td">  <button id='jAlert_ok'  onclick="jAlertagree()"></button>  </td>
            </tr>
        </table>
    </div>
</div>





<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>


<script>
function jAlertagree(){
    var parent = document.getElementById('jAlRem');
    var child = document.getElementById('jAlert');
    parent.removeChild(child);
    document.body.style.backgroundColor="white";
    document.body.style.cursor="default";
}
</script>

يحصل جزء js على العنصر في HTML لإنشاء مربع التنبيه ، ثم يحذفه بعد أن ينقر المستخدم على موافق.

يمكنك استدعاء التنبيه باستخدام jAlert("Custom Text", "Ok!");




أعرف أن هذه رسالة أقدم ولكني كنت أبحث عن شيء مماثل هذا الصباح. أشعر أن الحل كان أبسط بكثير بعد النظر في بعض الحلول الأخرى. هناك شيء واحد هو أنني أستخدم الخط الرائع في علامة الربط.

أردت عرض حدث على التقويم الخاص بي عندما نقر المستخدم على الحدث. لذلك قمت بترميز علامة <div> منفصلة مثل:

    <div id="eventContent" class="eventContent" style="display: none; border: 1px solid #005eb8; position: absolute; background: #fcf8e3; width: 30%; opacity: 1.0; padding: 4px; color: #005eb8; z-index: 2000; line-height: 1.1em;">
    <a style="float: right;"><i class="fa fa-times closeEvent" aria-hidden="true"></i></a><br />
    Event: <span id="eventTitle" class="eventTitle"></span><br />
    Start: <span id="startTime" class="startTime"></span><br />
    End: <span id="endTime" class="endTime"></span><br /><br />
</div>

أجد أنه من الأسهل استخدام أسماء الفئات في مسجولي منذ أن أستخدم asp.net.

وفيما يلي مسجّل تطبيق fullcalendar الخاص بي.

<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            googleCalendarApiKey: 'APIkey',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            events: {
                googleCalendarId: '@group.calendar.google.com'
            },
            eventClick: function (calEvent, jsEvent, view) {
                var stime = calEvent.start.format('MM/DD/YYYY, h:mm a');
                var etime = calEvent.end.format('MM/DD/YYYY, h:mm a');
                var eTitle = calEvent.title;
                var xpos = jsEvent.pageX;
                var ypos = jsEvent.pageY;
                $(".eventTitle").html(eTitle);
                $(".startTime").html(stime);
                $(".endTime").html(etime);
                $(".eventContent").css('display', 'block');
                $(".eventContent").css('left', '25%');
                $(".eventContent").css('top', '30%');
                return false;
            }
        });
        $(".eventContent").click(function() {
            $(".eventContent").css('display', 'none');
        });
    });

</script>

يجب أن يكون لديك معرف تقويم Google الخاص بك ومفاتيح واجهة برمجة التطبيقات.

آمل أن يساعد هذا عندما تحتاج إلى شاشة منبثقة بسيطة.




خيار واحد هو استخدام AlertifyJS ، وهذا يعطي صندوق تنبيه لطيف.

قم ببساطة بتضمين المكتبات المطلوبة من here ، واستخدم جزء التعليمات البرمجية التالي لعرض مربع التنبيه.

alertify.confirm("This is a confirm dialog.",
  function(){
    alertify.success('Ok');
  },
  function(){
    alertify.error('Cancel');
  });

سوف تبدو الإخراج مثل هذا. لرؤيتها في العمل هنا هو demo




Related

javascript css