I welcome everyone! Help, please, modify the modal window script. This window is a reference for the user. I need the default window to be open, and the open button is unavailable. When you close a window, you need one of two effects (which you can do): 1) the window closes, after which the opening button appears right in the same place, and then it moves in a visible way to the upper right corner of the screen. 2) the window closes, after which the opening button appears immediately in the upper right corner of the screen, with animation (animation in the form of a bell or something, to attract the user's attention.) I beg your help! Thank you

html:

<button class="click">Открыть</button> <div class="message">Сообщение <button class="okay">Закрыть</button> </div>

css:

 .click { display: block; height: 80px; width: 300px; position: absolute; background: #260016; } .message { position: absolute; top: calc(50% - 140px); left: calc(50% - 300px); width: 600px; height: 280px; z-index: 1000; background: #fff; color: button; padding: 60px; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 6px; -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .message.active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .okay { display: block; height: 80px; width: 300px; background: #e68a6c; }

js:

 (function() { $(function() { // открываем окно $('button').click(function(evt){ evt.stopPropagation(); $('.message').addClass('active'); }); // закрываем окно $('.message').click(function(evt){ evt.stopPropagation(); }); $(document).add('.okay').click(function() { $('.message').removeClass('active'); }); }); }).call(this);

    1 answer 1

    Modify this way (this script must be inserted in addition to the one you have):

     $(document).ready(function() { $('button').click(function() { $(this).hide().css('opacity', '0') }); $('button').click(); $('.okay').click(function() { $('.click').show() .css('transition', 'all 500ms cubic-bezier(0.42, 0, 0.58, 1) 0s') .css('opacity', '1') .css('position', 'fixed') .css('left', '0px') .css('height', 'opx'); }); });

    The bottom line in general should be clear.

    • I greet you! I apologize for the long answer. Something I can not. When adding this script, the window is not available at all. I picked, I can not understand what is the reason. - LADYX