<?php add_action('widgets_init', 'my_widget_plugin_four_buttons'); function my_widget_plugin_four_buttons() { register_widget('my_widget_four_buttons'); } class my_widget_four_buttons extends WP_Widget { function __construct() { parent::__construct( 'my_widget_four_buttons_construct', 'four_buttons', array('description' => 'Widget_four_buttons',) ); } public function widget($args, $instance) { $title = apply_filters('widget_title', $instance['title']); echo $args['before_widget']; if (!empty($title)) echo $args['before_title'] . $title . $args['after_title']; echo ' <div class="container_color_buttons"> <div style="text-align: center;"> <a href="#win3" class="button button-blue">Add-Event</a> </div> <a href="#x" class="overlay" id="win3"></a> <div class="popup popup2"> <p>'; echo do_shortcode('[emefs_submit_event_form]'); echo '</p> <a class="close" title="Close" href="index.html" onclick = "index.html(); return false;"></a> </div> </div> <style> .container_color_buttons { position: relative; display: block; margin: 0 auto; width: 80%; min-width: 172px; background: lightgrey; color: #404040; font: 14px/20px Tahoma, Arial, sans-serif; padding: 0; } .container_color_buttons > .button { margin: 12px; } .button { position: relative; display: inline-block; margin: 5px 0; padding: 0; height: 36px; width: 226px; border: 1px solid; border-radius: 3px; background-clip: padding-box; -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25); color: white; vertical-align: top; text-align: center; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.4); font-size: 14px; line-height: 35px; cursor: pointer; } .rounded-button { border-radius: 18px; } .circular-button { padding: 0; width: 36px; border-radius: 65px 65px 65px 65px; } .button:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); content: ""; pointer-events: none; } .button:hover:before { background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)); background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)); background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)); background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)); } .button:active { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); } .button:active:before { content: ""; } .button-blue { border-color: #0d78b6 #0d78b6 #0b689e; background: #1097e6; background-image: -webkit-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3); background-image: -moz-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3); background-image: -o-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3); background-image: linear-gradient(to bottom, #25a5f0, #1097e6 66%, #0f8ad3); } .button-blue:active { border-color: #0b689e #0d78b6 #0d78b6; background: #1097e6; } .button-darkblue { border-color: #2d477b #2d477b #263c68; background: #3b5ca0; background-image: -webkit-linear-gradient(top, #4369b6, #3b5ca0 66%, #365391); background-image: -moz-linear-gradient(top, #4369b6, #3b5ca0 66%, #365391); background-image: -o-linear-gradient(top, #4369b6, #3b5ca0 66%, #365391); background-image: linear-gradient(to bottom, #4369b6, #3b5ca0 66%, #365391); } .button-darkblue:active { border-color: #263c68 #2d477b #2d477b; background: #3b5ca0; } @media only screen and (min-width: 768px) and (max-width: 959px) { .container_color_buttons { width: 100%; } } @media only screen and (max-width: 767px) { .container_color_buttons { width: 95%; } .button { min-width: auto; min-height: auto; font-size: 12px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .container_color_buttons { width: 70%; } } .overlay { top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; visibility: hidden; background-color: rgba(0, 0, 0, 0.7); opacity: 0; position: fixed; cursor: default; } .overlay:target { visibility: visible; opacity: 1; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } .popup2 { height: 600px; border: 1px solid blue; } .popup { top: 0; right: 0; left: 50%; font-size: 14px; font-family: Tahoma, Arial, sans-serif; z-index: 10000; margin: 0 auto; width: 100%; min-width: 320px; max-width: 820px; position: fixed; padding: 15px; border: 1px solid #383838; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -o-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -webkit-transform: translate(-50%, -150%); -ms-transform: translate(-50%, -150%); -o-transform: translate(-50%, -150%); transform: translate(-50%, -150%); } .overlay:target+.popup { top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* анимируем трансформацию */ -webkit-transition: transform 0.6s ease-out; -moz-transition: transform 0.6s ease-out; -ms-transition: transform 0.6s ease-out; -o-transition: transform 0.6s ease-out; transition: transform 0.6s ease-out; } .close { position: absolute; padding: 0; top: -10px; right: -10px; width: 36px; height: 36px; border: 2px solid #ccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgba(61, 61, 61, 0.8); -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; text-align: center; text-decoration: none; font-weight: bold; line-height: 20px; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s; } .close:before { color: rgba(255, 255, 255, 0.9); text-shadow: 0 -1px rgba(0, 0, 0, 0.9); font-size: 14px; content: "Закрыть"; } .close:hover { background-color: rgba(252, 20, 0, 0.8); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } @media only screen and (min-width: 768px) and (max-width: 959px) { .popup { width: 95%; } } @media only screen and (min-width: 320px) and (max-width: 767px) { .popup { width:85%; } } </style> '; echo $args['after_widget']; } public function form($instance) { if (isset($instance['title'])) { $title = $instance['title']; } else { $title = 'Title of widget'; } ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>"/> </p> <?php } public function update($new_instance, $old_instance) { $instance = array(); $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : ''; return $instance; } } ?>
You have javascript disabled. You will not be able to edit any code.