How do I create a custom event and fire it using Javascript

Question

My Code :.....

<html>
<head>
<script>
function demo()
{
    var win=window.open("demo.html",'_blank');
    alert('Requested Page Loaded...');
    win.focus();
}
</script>
</head>
<body>
<input type="button" value="demo" onClick="demo()"></input>
</body>
</html>

I want to close the alert event dynamically using JavaScript event. When alert is come in seen and it will close automatically using JavaScript event fire and close it..

Its depend if cannot close then it will fire event like ok button press automatically. — Panchotiya Vipul
– Panchotiya Vipul, Commented Dec 2, 2013 at 4:34
alert dialogs are blocking. Even if it was possible to create such an event, you could not trigger it because no code can be executed while the dialog is shown. — Felix Kling
– Felix Kling, Commented Dec 2, 2013 at 4:35
Write @FelixKling it is not possible to fire any event when dialog is appear. But Can we Fire Bubble Event or Combine Event in Javascript like KeyboardEvent + MouseEvent both at the same time? Or Another Option is we can Loose Focus of Opening in New Tab and Set Focus of Current Tab. e.g. window.focus(); and window.blur(); — Ashwin Parmar
– Ashwin Parmar, Commented Dec 2, 2013 at 4:58

TimSPQR · Accepted Answer · 2013-12-02 05:07:57Z

You could create a pseudo-alert. You can make it a modal if it is closed by a programmed event (instead of screen-triggered).

HERE is a fiddle. (click on two colors to open and close alert.

HTML

<div class='testdiv'></div>
<div class='testdiv3'></div>
<div id='dialogtest' class='testdiv2'>Alert!</div>

CSS

.testdiv {
    width: 100px;
    height: 100px;
    margin: 0px auto;
    background-color: red;
}
.testdiv3 {
    width: 100px;
    height: 100px;
    margin: 0px auto;
    background-color: green;
}

.testdiv2 {
    background-color: green;
    width: 50px;
    height: 50px;
    font-size: 15px;
}
.ui-dialog-titlebar {
    display: none;
}

JS

$( ".testdiv2" ).dialog({
                       autoOpen: false,
                          modal: false,
                         height: 50,
                          width: 'auto',
                       position: { my: "right middle",
                                   at: "left middle",
                                  of : ".testdiv" } 
                           });

$('.testdiv').click(function(){
  $('.testdiv2').dialog('open');
});
$('.testdiv3').click(function(){
  $('.testdiv2').dialog('close');
});

Collectives™ on Stack Overflow

How do I create a custom event and fire it using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related