সতর্কতা বাক্সের স্টাইলটি কীভাবে পরিবর্তন করবেন?


123

আমাকে একটি সতর্কতা বাক্সে "ওকে" বোতামের স্টাইলটি পরিবর্তন করতে হবে ।

<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>


19
আপনি পারবেন না। আপনাকে নিজের তৈরি করতে হবে। উদাহরণস্বরূপ, jQuery UI ডায়ালগ: jqueryui.it/demos/dialog
জেমস

4
সতর্কতা বাক্স ব্যবহার করবেন না দয়া করে। আরও ভাল বিকল্প আছে। ডিবাগিংয়ের জন্য এগুলি কেবল ব্যবহার করুন।
এড হিল

15
lmao @ এডহেল, দয়া করে ডিবাগিংয়ের জন্য সেগুলি ব্যবহার করবেন না! xD আরও ভাল অপ্টিন রয়েছে এক্সডি
এরিকজি

1
আমি বিরক্তিকর জিনিসটি দিয়ে বোরিং শুরু করলাম xD codepen.io/anon/pen/tFhKu
EricG

4
JQuery কে "উত্তর" হিসাবে স্বীকার করার জন্য ডাউন-ভোট দিয়েছেন। সঠিক উত্তরটি হ'ল কোনও সিএসএস স্পেকে কিছু মানক করার প্রয়াসের পক্ষে পরামর্শ করা।
জন

উত্তর:


121

সতর্কতা বাক্স একটি সিস্টেম অবজেক্ট এবং CSS এর অধীন নয়। এই স্টাইলের জিনিসটি করতে আপনাকে একটি HTML উপাদান তৈরি করতে হবে এবং alert()কার্যকারিতা নকল করতে হবে। JQuery ইউআই ডায়ালগ আপনার জন্য অনেক কাজ করে, মূলত আমি বর্ণিত হিসাবে কাজ করে: লিঙ্ক


16
যত্ন নিন 'কারণ jQueryUI মডেল বাক্স ব্যবহারকারীর ক্লিকের জন্য অপেক্ষা করা জ্যাকুরি কোড এক্সিকিউশনটি বিরতি দেয় না (যেমন সতর্কতা দেয়)।
T30

2
এটি হ্যান্ডেল করার একটি ভাল উপায় হ'ল আপনার ইভেন্ট হ্যান্ডলারের মধ্যে ইভেন্ট.প্রিভেন্টডাফল্ট () অন্তর্ভুক্ত করা।
পিসিএসগ্র্যান্ডে

সতর্কতা তৈরি করতে আপনি খাঁটি জেএস ব্যবহার করতে পারেন
স্ট্যাকওভারফ্লো.

62

আমি alert()বক্স স্টাইলগুলি ব্যবহার করে স্ক্রিপ্টটি ব্যবহার করার চেষ্টা করেছি tried java-scriptআমি এখানে সেগুলি জেএস এবং সিএসএস ব্যবহার করেছি।

এই কোডিং জেএস কার্যকারিতা উল্লেখ করুন।

var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";

if(document.getElementById) {
    window.alert = function(txt) {
        createCustomAlert(txt);
    }
}

function createCustomAlert(txt) {
    d = document;

    if(d.getElementById("modalContainer")) return;

    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    mObj.id = "modalContainer";
    mObj.style.height = d.documentElement.scrollHeight + "px";

    alertObj = mObj.appendChild(d.createElement("div"));
    alertObj.id = "alertBox";
    if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
    alertObj.style.visiblity="visible";

    h1 = alertObj.appendChild(d.createElement("h1"));
    h1.appendChild(d.createTextNode(ALERT_TITLE));

    msg = alertObj.appendChild(d.createElement("p"));
    //msg.appendChild(d.createTextNode(txt));
    msg.innerHTML = txt;

    btn = alertObj.appendChild(d.createElement("a"));
    btn.id = "closeBtn";
    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
    btn.href = "#";
    btn.focus();
    btn.onclick = function() { removeCustomAlert();return false; }

    alertObj.style.display = "block";

}

function removeCustomAlert() {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}

এবং CSS এর জন্য alert()বক্স

#modalContainer {
    background-color:rgba(0, 0, 0, 0.3);
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:10000;
    background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
    position:relative;
    width:300px;
    min-height:100px;
    margin-top:50px;
    border:1px solid #666;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:20px 30px;
}

#modalContainer > #alertBox {
    position:fixed;
}

#alertBox h1 {
    margin:0;
    font:bold 0.9em verdana,arial;
    background-color:#3073BB;
    color:#FFF;
    border-bottom:1px solid #000;
    padding:2px 0 2px 5px;
}

#alertBox p {
    font:0.7em verdana,arial;
    height:50px;
    padding-left:5px;
    margin-left:55px;
}

#alertBox #closeBtn {
    display:block;
    position:relative;
    margin:5px auto;
    padding:7px;
    border:0 none;
    width:70px;
    font:0.7em verdana,arial;
    text-transform:uppercase;
    text-align:center;
    color:#FFF;
    background-color:#357EBD;
    border-radius: 3px;
    text-decoration:none;
}

/* unrelated styles */

#mContainer {
    position:relative;
    width:600px;
    margin:auto;
    padding:5px;
    border-top:2px solid #000;
    border-bottom:2px solid #000;
    font:0.7em verdana,arial;
}

h1,h2 {
    margin:0;
    padding:4px;
    font:bold 1.5em verdana;
    border-bottom:1px solid #000;
}

code {
    font-size:1.2em;
    color:#069;
}

#credits {
    position:relative;
    margin:25px auto 0px auto;
    width:350px; 
    font:0.7em verdana;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    height:90px;
    padding-top:4px;
}

#credits img {
    float:left;
    margin:5px 10px 5px 0px;
    border:1px solid #000000;
    width:80px;
    height:79px;
}

.important {
    background-color:#F5FCC8;
    padding:2px;
}

code span {
    color:green;
}

এবং এইচটিএমএল ফাইল:

<input type="button" value = "Test the alert" onclick="alert('Alert this pages');" />

এবং এই ডেমোটিও দেখুন : জেএসফিডল এবং ডেমো ফলাফল চিত্র

এখানে চিত্র বর্ণনা লিখুন


3
তবে এটি কাস্টম সতর্কতা, মূল ব্রাউজার সতর্কতা বাক্স স্টাইলিং নয়। কোন কৌশল আছে, আমরা এখনও নিখোঁজ?
প্রতীক

1
উত্তরে কাস্টম সতর্কতা দেশীয় সতর্কতার সাথে তুলনামূলক নয়। নেটিভ সতর্কতা এবং প্রম্পট হ'ল ব্লক-ও-ওয়েট।
বিনো টুং

58

আমি সুইটএলার্ট ব্যবহার করি , এটি দুর্দান্ত, আপনি প্রচুর কাস্টমাইজেশন বিকল্পের পাশাপাশি সমস্ত কলব্যাক পাবেন

স্ক্রিনশট

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

এখানে চিত্র বর্ণনা লিখুন


আমরা কি এটি খাঁটি জাভাস্ক্রিপ্ট এবং এইচটিএমএলে ব্যবহার করতে পারি?
সুকন্যাপাই

9

সম্ভব না. আপনি যদি ডায়লগের চাক্ষুষ উপস্থিতিটি কাস্টমাইজ করতে চান তবে আপনাকে jQuery.UI ডায়ালগের মতো একটি জেএস-ভিত্তিক সমাধান ব্যবহার করতে হবে ।


6

একটি বিকল্প হ'ল পরিবর্তিত ব্যবহার করা , এটি একটি দুর্দান্ত দেখায় সতর্কতা বাক্স দেয়।

কেবল এখান থেকে প্রয়োজনীয় গ্রন্থাগারগুলি অন্তর্ভুক্ত করুন এবং সতর্কতা বাক্সটি প্রদর্শনের জন্য নিম্নলিখিত কোডের টুকরাটি ব্যবহার করুন।

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

আউটপুট এটির মতো দেখাবে। এখানে এটি কর্মে দেখতে ডেমো রয়েছে

এখানে চিত্র বর্ণনা লিখুন


6

বিকল্প 1. আপনি সতর্কতা জেএস ব্যবহার করতে পারেন , এটি সতর্কতার জন্য ভাল

এখানে চিত্র বর্ণনা লিখুন

এখানে চিত্র বর্ণনা লিখুন

OPTION2। আপনি ওয়েব অ্যাপ্লিকেশনগুলির উপর ভিত্তি করে কোনও প্রকল্প শুরু করেন বা কেবল যোগদান করেন, ইন্টারফেসের নকশা সম্ভবত ভাল। অন্যথায় এটি পরিবর্তন করা উচিত। ওয়েব 2.0 অ্যাপ্লিকেশনগুলিতে আপনি গতিশীল বিষয়বস্তু, অনেক প্রভাব এবং অন্যান্য স্টাফ নিয়ে কাজ করবেন। এই সমস্ত জিনিস ঠিক আছে, কিন্তু কেউ জাভাস্ক্রিপ্ট সতর্কতা স্টাইল আপ এবং বাক্সগুলি নিশ্চিত করার বিষয়ে ভাবেন নি। এখানে তারা উপায়

সাধারণ জেএস ফাইলের নাম তৈরি করুন jsConfirmStyle.js। এখানে সহজ জেএস কোড

ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;

xConfirmStart=800;
yConfirmStart=100;

if(ie5||nn6) {
if(ie5) cs=2,th=30;
else cs=0,th=20;
document.write(
    "<div id='jsconfirm'>"+
        "<table>"+
            "<tr><td id='jsconfirmtitle'></td></tr>"+
            "<tr><td id='jsconfirmcontent'></td></tr>"+
            "<tr><td id='jsconfirmbuttons'>"+
                "<input id='jsconfirmleft' type='button' value='' onclick='leftJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
                "&nbsp;&nbsp;"+
                "<input id='jsconfirmright' type='button' value='' onclick='rightJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
            "</td></tr>"+
        "</table>"+
    "</div>"
);
 }

           document.write("<div id='jsconfirmfade'></div>");


function leftJsConfirm() {
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=leftJsConfirmUri;
}
function rightJsConfirm() {
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=rightJsConfirmUri;
}
function confirmAlternative() {
if(confirm("Scipt requieres a better browser!"))       document.location.href="http://www.mozilla.org";
 }

leftJsConfirmUri = '';
rightJsConfirmUri = '';

/**
 * Show the message/confirm box
*/
function showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,confirmrighturi)  {
document.getElementById("jsconfirmtitle").innerHTML=confirmtitle;
document.getElementById("jsconfirmcontent").innerHTML=confirmcontent;
document.getElementById("jsconfirmleft").value=confirmlefttext;
document.getElementById("jsconfirmright").value=confirmrighttext;
leftJsConfirmUri=confirmlefturi;
rightJsConfirmUri=confirmrighturi;
xConfirm=xConfirmStart, yConfirm=yConfirmStart;
if(ie5) {
    document.getElementById("jsconfirm").style.left='25%';
    document.getElementById("jsconfirm").style.top='35%';
}
else if(nn6) {
    document.getElementById("jsconfirm").style.top='25%';
    document.getElementById("jsconfirm").style.left='35%';
}
else confirmAlternative();
}

সাধারণ এইচটিএমএল ফাইল তৈরি করুন

<html>
<head>
<title>jsConfirmSyle</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="jsConfirmStyle.js"></script>
<script type="text/javascript">

 function confirmation() {
 var answer = confirm("Wanna visit google?")
 if (answer){
    window.location = "http://www.google.com/";
}
}
  </script>
   <style type="text/css">
    body {
  background-color: white;
   font-family: sans-serif;
  }
#jsconfirm {
border-color: #c0c0c0;
border-width: 2px 4px 4px 2px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: -1000px;
z-index: 100;
}

#jsconfirm table {
background-color: #fff;
border: 2px groove #c0c0c0;
height: 150px;
width: 300px;
}

#jsconfirmtitle {
background-color: #B0B0B0;
font-weight: bold;
height: 20px;
text-align: center;
}

#jsconfirmbuttons {
height: 50px;
text-align: center;
}

#jsconfirmbuttons input {
background-color: #E9E9CF;
color: #000000;
font-weight: bold;
width: 125px;
height: 33px;
padding-left: 20px;
}

#jsconfirmleft{
background-image: url(left.png);
}

#jsconfirmright{
background-image: url(right.png);
}
</style>

 <p>
<a href="#"  onclick="javascript:showConfirm('Please confirm','Are you really sure to visit google?','Yes','http://www.google.com','No','#')">JsConfirmStyled</a> </p>
<p><a href="#" onclick="confirmation()">standard</a></p>


</body>
 </html>

5

আপনার নিজের সতর্কতা বাক্সটি এটি তৈরি করতে হবে:

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>

জেএস অংশটি সতর্কতা বাক্স তৈরি করতে এইচটিএমএলে উপাদানটি পায়, তারপরে ব্যবহারকারী ক্লিকের পরে এটি মুছে দেয় ঠিক আছে ।

আপনি সতর্কতা কল করে কল করতে পারেন jAlert("Custom Text", "Ok!");


5

আমি জানি এটি একটি পুরানো পোস্ট তবে আমি আজ সকালে এই জাতীয় কিছু খুঁজছিলাম। আমি মনে করি যে অন্যান্য সমাধানগুলির কয়েকটি দেখার পরে আমার সমাধানটি অনেক সহজ ছিল। একটি জিনিস হ'ল আমি অ্যাঙ্কর ট্যাগে দুর্দান্ত ফন্ট ব্যবহার করি।

যখন ব্যবহারকারী ইভেন্টটি ক্লিক করেছিল তখন আমি আমার ক্যালেন্ডারে একটি ইভেন্ট প্রদর্শন করতে চেয়েছিলাম। সুতরাং আমি আলাদা আলাদা কোড কোড করেছিলাম <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 ব্যবহার করছি সেহেতু আমার jquery এ ক্লাসের নামগুলি ব্যবহার করা আমার পক্ষে সহজ।

নীচে আমার ফুলক্যালেন্ডার অ্যাপ্লিকেশনটির জন্য jquery রয়েছে।

<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>

আপনার নিজের গুগল ক্যালেন্ডার আইডি এবং এপিআই কী থাকতে হবে।

আমি আশা করি যখন আপনার একটি সহজ পপআপ প্রদর্শন দরকার হয় তখন এটি সাহায্য করে।


2
দেরিতে প্রশ্নের উত্তর দিয়ে কোনও ভুল নেই। আপ-টু-ডেট উত্তরগুলি রাখা গুরুত্বপূর্ণ।
dckuehn

2

<head>
  

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
    <script type="text/javascript">
  

$(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
    </script>
</head>
<body>
   <div id="dialog" title="Basic dialog">
   <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>
 
  <button id="opener">Open Dialog</button>

</body>


1

স্টাইলিং সতর্কতা () - বাক্সগুলি সম্ভব নয়। আপনি এর পরিবর্তে একটি জাভাস্ক্রিপ্ট মডেল ওভারলে ব্যবহার করতে পারেন।


1

আমি মনে করি না আপনি ব্রাউজারগুলির ডিফল্ট সতর্কতা বাক্সগুলির স্টাইল পরিবর্তন করতে পারেন।

আপনাকে নিজের তৈরি করতে হবে বা এক্সডায়ালগের মতো একটি সাধারণ এবং কাস্টমাইজযোগ্য লাইব্রেরি ব্যবহার করতে হবে । সতর্কতা বাক্সটি কাস্টমাইজ করার জন্য নিম্নলিখিতটি একটি উদাহরণ। আরও ডেমো এখানে পাওয়া যাবে

function show_alert() {
    xdialog.alert("Hello! I am an alert box!");
}
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css"/>
    <script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js"></script>
    
    <style>
        .xd-content .xd-body .xd-body-inner {
            max-height: unset;
        }
        .xd-content .xd-body p {
            color: #f0f;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
        }
        .xd-content .xd-button.xd-ok {
            background: #734caf;
        }
    </style>
</head>
<body>
    <input type="button" onclick="show_alert()" value="Show alert box" />
</body>


1

আমি sweetalert2গ্রন্থাগার ব্যবহার করি এটি সত্যই সহজ, প্রচুর কাস্টমাইজেশন, আধুনিক, অ্যানিমেটেড উইন্ডো, চিত্তাকর্ষক এবং দুর্দান্ত নকশা।

Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<a href>Why do I have this issue?</a>'
})

এই লিঙ্কটি পরীক্ষা করুন


1

আমি আমার কথোপকথনের স্টাইল করতে সতর্কতা জেএস ব্যবহার করি।

alertify.alert('Ready!');
alertify.YoutubeDialog || alertify.dialog('YoutubeDialog',function(){
    var iframe;
    return {
        // dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId)
        main:function(videoId){
            //set the videoId setting and return current instance for chaining.
            return this.set({ 
                'videoId': videoId
            });
        },
        // we only want to override two options (padding and overflow).
        setup:function(){
            return {
                options:{
                    //disable both padding and overflow control.
                    padding : !1,
                    overflow: !1,
                }
            };
        },
        // This will be called once the DOM is ready and will never be invoked again.
        // Here we create the iframe to embed the video.
        build:function(){           
            // create the iframe element
            iframe = document.createElement('iframe');
            iframe.frameBorder = "no";
            iframe.width = "100%";
            iframe.height = "100%";
            // add it to the dialog
            this.elements.content.appendChild(iframe);

            //give the dialog initial height (half the screen height).
            this.elements.body.style.minHeight = screen.height * .5 + 'px';
        },
        // dialog custom settings
        settings:{
            videoId:undefined
        },
        // listen and respond to changes in dialog settings.
        settingUpdated:function(key, oldValue, newValue){
            switch(key){
               case 'videoId':
                    iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1";
                break;   
            }
        },
        // listen to internal dialog events.
        hooks:{
            // triggered when the dialog is closed, this is seperate from user defined onclose
            onclose: function(){
                iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
            },
            // triggered when a dialog option gets update.
            // warning! this will not be triggered for settings updates.
            onupdate: function(option,oldValue, newValue){
                switch(option){
                    case 'resizable':
                        if(newValue){
                            this.elements.content.removeAttribute('style');
                            iframe && iframe.removeAttribute('style');
                        }else{
                            this.elements.content.style.minHeight = 'inherit';
                            iframe && (iframe.style.minHeight = 'inherit');
                        }
                    break;    
                }    
            }
        }
    };
});
//show the dialog
alertify.YoutubeDialog('GODhPuM5cEE').set({frameless:true});
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.rtl.min.css"/>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.