Overlay Window
« on: June 07, 2023, 06:59:26 PM »
Hello everyone, I have a question and I hope someone can help me.

I have an overlay and it should automatically open like a popup when the page is called up, but how could I integrate it?

Code: [Select]
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<style>
.login-overlay {
  position: fixed;
  width: 360px;
  height: 500px;
    }
</style>


    <div id="login-overlay" class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Wytery.com</h4>
          </div>
          <div class="modal-body">
              <div class="row">
                  <div class="col-xs-6">
                      <div class="well">
                          <form> <div class="form-container form-horizontal form-container-box">
    <div class="header">
        <h1><?php _e('Access to your account''sigma'); ?></h1>
    </div>
    <div class="resp-wrapper">
        <form action="<?php echo osc_base_url(true); ?>" method="post" >
            <input type="hidden" name="page" value="login" />
            <input type="hidden" name="action" value="login_post" />

            <div class="control-group">
                <label class="control-label" for="email"><?php _e('E-mail''sigma'); ?></label>
                <div class="controls">
                    <?php UserForm::email_login_text(); ?>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="password"><?php _e('Password''sigma'); ?></label>
                <div class="controls">
                    <?php UserForm::password_login_text(); ?>
                </div>
            </div>

            <div class="control-group remember">
                <div class="controls checkbox">
                    <?php UserForm::rememberme_login_checkbox();?> <label for="remember"><?php _e('Remember me''sigma'); ?></label>
                </div>
            </div>

            <div class="control-group butt">
                <div class="controls">
                    <button type="submit" class="btn btn-primary"><?php _e("Log in"'sigma');?></button>
                </div>
            </div>
<?php osc_run_hook('user_login_form'); ?>
<div class="control-group"><?php osc_show_recaptcha('login'); ?></div>
            <div class="control-group act">
                <a href="<?php echo osc_register_account_url(); ?>" class="rg"><?php _e("Register for a free account"'sigma'); ?></a>
                <a href="<?php echo osc_recover_user_password_url(); ?>" class="lg"><?php _e("Forgot password?"'sigma'); ?></a>
            </div>
        </form>
    </div>
</div>
                          </form>
                      </div>
                  </div>
                  <div class="col-xs-6">
                      <p class="lead">Willkommen bei Wytery <span class="text-success">Melde dich hier an,
                                        oder erstelle ein neues Konto, damit du:</span></p>
                      <ul class="list-unstyled" style="line-height: 2">
                          <li><span class="fa fa-check text-success"></span> Nachrichten senden und empfangen kannst</li>
                          <li><span class="fa fa-check text-success"></span> Eigene Anzeigen aufgeben kannst</li>
                          <li><span class="fa fa-check text-success"></span> Für dich interessante Anzeigen siehst</li>
                      </ul>
                      <p><a href="https://haushaltgeraete-chemnitz.com/de/user/register" class="btn btn-info btn-block">Registrieren Sie sich jetzt!</a></p>
                  </div>
              </div>
          </div>
      </div>
  </div>

*

MB Themes

Re: Overlay Window
« Reply #1 on: June 08, 2023, 09:39:27 AM »
Sorry not clear what you need.
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

Re: Overlay Window
« Reply #2 on: June 08, 2023, 12:50:41 PM »
I want it to open this overlay in the foreground similar to a popup which you can then click away to view the actual website.

*

MB Themes

Re: Overlay Window
« Reply #3 on: June 08, 2023, 01:03:35 PM »
Ok got you.
code looks to be OK.
Do you have URL where it is ?
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

Re: Overlay Window
« Reply #4 on: June 08, 2023, 07:28:31 PM »
the url is https://haushaltgeraete-chemnitz.com/de// but if i insert the code like this in the header.php it doesn't appear as a popup but as embedded.

I currently have it on maintenance mode.




The window is much too big and can't get it smaller and it can't be clicked away I don't know what to do next.
The input fields shouldn't be that big, but a little narrower.


Here is my code from header.php
Code: [Select]
<?php
/*
 * Copyright 2014 Osclass
 * Copyright 2021 Osclass by OsclassPoint.com
 *
 * Osclass maintained & developed by OsclassPoint.com
 * You may not use this file except in compliance with the License.
 * You may download copy of Osclass at
 *
 *     https://osclass-classifieds.com/download
 *
 * Do not edit or add to this file if you wish to upgrade Osclass to newer
 * versions in the future. Software is distributed on an "AS IS" basis, without
 * warranties or conditions of any kind, either express or implied. Do not remove
 * this NOTICE section as it contains license information and copyrights.
 */
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo sigma_default_direction()=='0' 'ltr''rtl'?>" lang="<?php echo str_replace('_''-'osc_current_user_locale()); ?>">
  <head>
    <?php osc_current_web_theme_path('head.php') ; ?>
  </head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="login-overlay">

<style>
.login-overlay {
  position: fixed;
  width: 160px;
  height: 50px;
  top: 30%;
  left: 20%;
  margin-top: -100px;
  margin-left: -150px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
    }


</style>

    <div id="login-overlay" class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Wytery.com</h4>
          </div>
          <div class="modal-body">
              <div class="row">
                  <div class="col-xs-6">
                      <div class="well">
                          <form> <div class="form-container form-horizontal form-container-box">
    <div class="header">
        <h1 style="font-size:15px"><?php _e('Access to your account''sigma'); ?></h1>
    </div>
    <div class="resp-wrapper">
        <form action="<?php echo osc_base_url(true); ?>" method="post" >
            <input type="hidden" name="page" value="login" />
            <input type="hidden" name="action" value="login_post" />
<p style="font-size: 10px">
            <div class="control-group">
                <label class="control-label" for="email"><?php _e('E-mail''sigma'); ?></label>
                <div class="controls">
                    <?php UserForm::email_login_text(); ?>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="password"><?php _e('Password''sigma'); ?></label>
                <div class="controls">
                    <?php UserForm::password_login_text(); ?>
                </div>
            </div>
</p>
            <div class="control-group remember">
                <div class="controls checkbox">
                    <?php UserForm::rememberme_login_checkbox();?> <label for="remember"><?php _e('Remember me''sigma'); ?></label>
                </div>
            </div>

            <div class="control-group butt">
                <div class="controls">
                    <button type="submit" class="btn btn-primary"><?php _e("Log in"'sigma');?></button>
                </div>
            </div>
<?php osc_run_hook('user_login_form'); ?>
<div class="control-group"><?php osc_show_recaptcha('login'); ?></div>
            <div class="control-group act">
                <a href="<?php echo osc_register_account_url(); ?>" class="rg"><?php _e("Register for a free account"'sigma'); ?></a>
                <a href="<?php echo osc_recover_user_password_url(); ?>" class="lg"><?php _e("Forgot password?"'sigma'); ?></a>
            </div>
       
    </div>
</div>
                          </form>
                      </div>
                  </div>
                  <div class="col-xs-6">
                      <p class="lead">Willkommen bei Wytery <span class="text-success">Melde dich hier an,
                                        oder erstelle ein neues Konto, damit du:</span></p>
                      <ul class="list-unstyled" style="line-height: 2">
                          <li><span class="fa fa-check text-success"></span> Nachrichten senden und empfangen kannst</li>
                          <li><span class="fa fa-check text-success"></span> Eigene Anzeigen aufgeben kannst</li>
                          <li><span class="fa fa-check text-success"></span> Für dich interessante Anzeigen siehst</li>
                      </ul>
                      <p><a href="https://haushaltgeraete-chemnitz.com/de/user/register" class="btn btn-info btn-block">Registrieren Sie sich jetzt!</a></p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>


<body <?php sigma_body_class(); ?>>
<header>
  <div class="wrapper">
    <div class="box">
      <div id="logo">
        <?php echo logo_header(); ?>
      </div>
     
      <div class="menu-icon isTablet isMobile">
        <div>
          <span class="l1"></span>
          <span class="l2"></span>
          <span class="l3"></span>
        </div>
      </div>
     
      <div class="nav">
   
        <a href="<?php echo osc_base_url(); ?>" class="isMobile"><?php _e('Home''sigma'); ?></a>
        <a class="isMobile" href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e("Publish Ad"'sigma');?></a>
        <a href="<?php echo osc_contact_url(); ?>" class="isMobile"><?php _e('Contact''sigma'); ?></a>

        <?php if( osc_users_enabled() ) { ?>
          <?php if( osc_is_web_user_logged_in() ) { ?>
            <a href="<?php echo osc_user_dashboard_url(); ?>"><?php _e('My account''sigma'); ?></a>
            <a href="<?php echo osc_user_logout_url(); ?>"><?php _e('Logout''sigma'); ?></a>
          <?php } else { ?>
            <a id="login_open" href="<?php echo osc_user_login_url(); ?>"><?php _e('Login''sigma') ; ?></a>

            <?php if(osc_user_registration_enabled()) { ?>
              <a href="<?php echo osc_register_account_url() ; ?>"><?php _e('Register''sigma'); ?></a>
            <?php ?>
          <?php ?>
        <?php ?>

        <?php if( osc_users_enabled() || ( !osc_users_enabled() && !osc_reg_user_post() )) { ?>
          <a class="publish isTablet isDesktop" href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e("Publish Ad"'sigma');?></a>
        <?php ?>

<?php if ( osc_count_web_enabled_locales() > 1) { ?>
        <div class="language">
          <?php osc_goto_first_locale(); ?>
          <?php while ( osc_has_web_enabled_locales() ) { ?>
            <a id="<?php echo osc_locale_code(); ?>" href="<?php echo osc_change_language_url osc_locale_code() ); ?>"><?php echo osc_locale_name(); ?></a>
          <?php ?>
        </div>
      <?php ?>

      </div>
    </div>
  </div>
</header>

<?php if(osc_get_preference('header-728x90''sigma') <> '') { ?>
  <section class="header-ad">
    <div class="wrapper">
      <div class="ads_header"><?php echo osc_get_preference('header-728x90''sigma'); ?></div>
    </div>
  </section>
<?php ?>

<?php if( osc_is_home_page() ) { ?>
  <section class="home-search">
    <div class="wrapper">
      <form action="<?php echo osc_base_url(true); ?>" method="get" class="search nocsrf box">
        <input type="hidden" name="page" value="search"/>
       
        <?php if(osc_is_home_page()) { ?>
          <h1><?php _e('Große und kleine Elektrogeräte für Haushalt und Küche.''sigma'); ?></h1>
        <?php ?>

        <div class="main-search">
          <div class="cell c1">
            <label><?php _e('Keyword''sigma'); ?></label>
            <input type="text" name="sPattern" id="query" class="input-text" value="" placeholder="<?php echo osc_esc_html(__(osc_get_preference('keyword_placeholder''sigma'), 'sigma')); ?>" />
          </div>

          <div class="cell c2">
            <label><?php _e('Category''sigma'); ?></label>
            <?php osc_categories_select('sCategory'null__('Select a category''sigma')) ; ?>
          </div>

          <div class="cell c3">
            <label>&nbsp;</label>
            <button class="btn btn-primary"><i class="fa fa-search"></i> <span><?php _e("Search"'sigma');?></span></button>
          </div>
        </div>
        <div id="message-seach"></div>
      </form>
    </div>
  </section>
<?php ?>


<section>
<?php osc_show_widgets('header'); ?>
  <?php $breadcrumb osc_breadcrumb('>'falseget_breadcrumb_lang()); ?>

  <?php if( $breadcrumb !== '') { ?>
    <div class="wrapper wrapper-flash">
      <div class="breadcrumb">
        <?php echo $breadcrumb?>
        <div class="clear"></div>
      </div>
    </div>
  <?php ?>

  <div class="wrapper wrapper-flash flash2"><?php osc_show_flash_message(); ?></div>

  <?php osc_run_hook('before-content'); ?>


  <div class="wrapper" id="content">
    <?php osc_run_hook('before-main'); ?>
    <div id="main">
      <?php osc_run_hook('inside-main'); ?>




« Last Edit: June 08, 2023, 11:04:58 PM by Roberto Klapper »

*

MB Themes

Re: Overlay Window
« Reply #5 on: June 10, 2023, 11:35:41 AM »
Ah like that.
Sorry its only CSS and you may need to check css guides for details.
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

Re: Overlay Window
« Reply #6 on: June 10, 2023, 09:33:00 PM »
So something changed there. This is what my header.php looks like now.

Code: [Select]
<?php
/*
 * Copyright 2014 Osclass
 * Copyright 2021 Osclass by OsclassPoint.com
 *
 * Osclass maintained & developed by OsclassPoint.com
 * You may not use this file except in compliance with the License.
 * You may download copy of Osclass at
 *
 *     https://osclass-classifieds.com/download
 *
 * Do not edit or add to this file if you wish to upgrade Osclass to newer
 * versions in the future. Software is distributed on an "AS IS" basis, without
 * warranties or conditions of any kind, either express or implied. Do not remove
 * this NOTICE section as it contains license information and copyrights.
 */
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo sigma_default_direction()=='0' 'ltr''rtl'?>" lang="<?php echo str_replace('_''-'osc_current_user_locale()); ?>">
  <head>

<style>
.modalDialog {
  position: fixed;
  width: 560px;
  height: 30px;
  top: 8%;
  left: 20%;
  margin-top: -100px;
  margin-left: -150px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  z-index: 99999;
  opacity: 0;
  transition: opacity 400ms ease-in;
  pointer-events: None;
    }

.modalDialog:target {
 opacity: 1;
 pointer-events: Auto;
}

.close {
 background-color: #606061;
 color: #FFFFFF;
 line-height: 25px;
 position: Absolute;
 right: -12px;
 text-align: Center;
 top: -10px;
 width: 24px;
 text-decoration: None;
 font-weight: Bold;
 border-radius: 12px;
 box-shadow: 1px 1px 3px #000000;
}

.close:hover {
 background-color: #00D9FF;
}
</style>

<script>
setTimeout(function() {
 window.location.href="#openModal";

}, 500);
</script>

    <?php osc_current_web_theme_path('head.php') ; ?>
  </head>

<div id="openModal" class="modalDialog">

<p>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="login-overlay">

<style>
.login-overlay {
  position: fixed;
  width: 160px;
  height: 50px;
  top: 9%;
  left: 20%;
  margin-top: -100px;
  margin-left: -150px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
    }

.control-group {
  width: 560px;
  height: 45px;
  top: 1%;
  left: 10%;
  margin-top: -100px;
  margin-left: -150px;
  padding: 8px;
  font-family: 'Open Sans', sans-serif;
    }


</style>

    <div id="login-overlay" class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <a href="#close" title="Schließen" class="close">X</a>
              <h4 class="modal-title" id="myModalLabel">Wytery.com</h4>
          </div>
          <div class="modal-body">
              <div class="row">
                  <div class="col-xs-6">
                      <div class="well">
                          <form> <div class="form-container form-horizontal form-container-box">
    <div class="header">
        <h1 style="font-size:15px"><?php _e('Access to your account''sigma'); ?></h1>
    </div>
    <div class="resp-wrapper">
        <form action="<?php echo osc_base_url(true); ?>" method="post" >
            <input type="hidden" name="page" value="login" />
            <input type="hidden" name="action" value="login_post" />
<p style="font-size: 10px">
            <div class="control-group">
                <label class="control-label" for="email"><?php _e('E-mail''sigma'); ?></label>
                <div class="controls">
                    <?php UserForm::email_login_text(); ?>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="password"><?php _e('Password''sigma'); ?></label>
                <div class="controls">
                    <?php UserForm::password_login_text(); ?>
                </div>
            </div>
</p>
            <div class="control-group remember">
                <div class="controls checkbox">
                    <?php UserForm::rememberme_login_checkbox();?> <label for="remember"><?php _e('Remember me''sigma'); ?></label>
                </div>
            </div>

            <div class="control-group butt">
                <div class="controls">
                    <button type="submit" class="btn btn-primary"><?php _e("Log in"'sigma');?></button>
                </div>
            </div>
<?php osc_run_hook('user_login_form'); ?>
<div class="control-group"><?php osc_show_recaptcha('login'); ?></div>
            <div class="control-group act">
               
                <a href="<?php echo osc_recover_user_password_url(); ?>" class="lg"><?php _e("Forgot password?"'sigma'); ?></a>
            </div>
       
    </div>
</div>
                          </form>
                      </div>
                  </div>
                  <div class="col-xs-6">
                      <p class="lead">Willkommen bei Wytery <span class="text-success">Melde dich hier an,
                                        oder erstelle ein neues Konto, damit du:</span></p>
                      <ul class="list-unstyled" style="line-height: 2">
                          <li><span class="fa fa-check text-success"></span> Nachrichten senden und empfangen kannst</li>
                          <li><span class="fa fa-check text-success"></span> Eigene Anzeigen aufgeben kannst</li>
                          <li><span class="fa fa-check text-success"></span> Für dich interessante Anzeigen siehst</li>
                      </ul>
                      <p><a href="https://haushaltgeraete-chemnitz.com/de/user/register" class="btn btn-info btn-block">Registrieren Sie sich jetzt!</a></p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
</p>
</div>


<body <?php sigma_body_class(); ?>>
<header>
  <div class="wrapper">
    <div class="box">
      <div id="logo">
        <?php echo logo_header(); ?>
      </div>
     
      <div class="menu-icon isTablet isMobile">
        <div>
          <span class="l1"></span>
          <span class="l2"></span>
          <span class="l3"></span>
        </div>
      </div>
     
      <div class="nav">
   
        <a href="<?php echo osc_base_url(); ?>" class="isMobile"><?php _e('Home''sigma'); ?></a>
        <a class="isMobile" href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e("Publish Ad"'sigma');?></a>
        <a href="<?php echo osc_contact_url(); ?>" class="isMobile"><?php _e('Contact''sigma'); ?></a>

        <?php if( osc_users_enabled() ) { ?>
          <?php if( osc_is_web_user_logged_in() ) { ?>
            <a href="<?php echo osc_user_dashboard_url(); ?>"><?php _e('My account''sigma'); ?></a>
            <a href="<?php echo osc_user_logout_url(); ?>"><?php _e('Logout''sigma'); ?></a>
          <?php } else { ?>
            <a id="login_open" href="<?php echo osc_user_login_url(); ?>"><?php _e('Login''sigma') ; ?></a>

            <?php if(osc_user_registration_enabled()) { ?>
              <a href="<?php echo osc_register_account_url() ; ?>"><?php _e('Register''sigma'); ?></a>
            <?php ?>
          <?php ?>
        <?php ?>

        <?php if( osc_users_enabled() || ( !osc_users_enabled() && !osc_reg_user_post() )) { ?>
          <a class="publish isTablet isDesktop" href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e("Publish Ad"'sigma');?></a>
        <?php ?>

<?php if ( osc_count_web_enabled_locales() > 1) { ?>
        <div class="language">
          <?php osc_goto_first_locale(); ?>
          <?php while ( osc_has_web_enabled_locales() ) { ?>
            <a id="<?php echo osc_locale_code(); ?>" href="<?php echo osc_change_language_url osc_locale_code() ); ?>"><?php echo osc_locale_name(); ?></a>
          <?php ?>
        </div>
      <?php ?>

      </div>
    </div>
  </div>
</header>

<?php if(osc_get_preference('header-728x90''sigma') <> '') { ?>
  <section class="header-ad">
    <div class="wrapper">
      <div class="ads_header"><?php echo osc_get_preference('header-728x90''sigma'); ?></div>
    </div>
  </section>
<?php ?>

<?php if( osc_is_home_page() ) { ?>
  <section class="home-search">
    <div class="wrapper">
      <form action="<?php echo osc_base_url(true); ?>" method="get" class="search nocsrf box">
        <input type="hidden" name="page" value="search"/>
       
        <?php if(osc_is_home_page()) { ?>
          <h1><?php _e('Große und kleine Elektrogeräte für Haushalt und Küche.''sigma'); ?></h1>
        <?php ?>

        <div class="main-search">
          <div class="cell c1">
            <label><?php _e('Keyword''sigma'); ?></label>
            <input type="text" name="sPattern" id="query" class="input-text" value="" placeholder="<?php echo osc_esc_html(__(osc_get_preference('keyword_placeholder''sigma'), 'sigma')); ?>" />
          </div>

          <div class="cell c2">
            <label><?php _e('Category''sigma'); ?></label>
            <?php osc_categories_select('sCategory'null__('Select a category''sigma')) ; ?>
          </div>

          <div class="cell c3">
            <label>&nbsp;</label>
            <button class="btn btn-primary"><i class="fa fa-search"></i> <span><?php _e("Search"'sigma');?></span></button>
          </div>
        </div>
        <div id="message-seach"></div>
      </form>
    </div>
  </section>
<?php ?>


<section>
<?php osc_show_widgets('header'); ?>
  <?php $breadcrumb osc_breadcrumb('>'falseget_breadcrumb_lang()); ?>

  <?php if( $breadcrumb !== '') { ?>
    <div class="wrapper wrapper-flash">
      <div class="breadcrumb">
        <?php echo $breadcrumb?>
        <div class="clear"></div>
      </div>
    </div>
  <?php ?>

  <div class="wrapper wrapper-flash flash2"><?php osc_show_flash_message(); ?></div>

  <?php osc_run_hook('before-content'); ?>


  <div class="wrapper" id="content">
    <?php osc_run_hook('before-main'); ?>
    <div id="main">
      <?php osc_run_hook('inside-main'); ?>


The CSS in <head>
Code: [Select]
<style>
.modalDialog {
  position: fixed;
  width: 560px;
  height: 30px;
  top: 8%;
  left: 20%;
  margin-top: -100px;
  margin-left: -150px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  z-index: 99999;
  opacity: 0;
  transition: opacity 400ms ease-in;
  pointer-events: None;
    }

.modalDialog:target {
 opacity: 1;
 pointer-events: Auto;
}

.close {
 background-color: #606061;
 color: #FFFFFF;
 line-height: 25px;
 position: Absolute;
 right: -12px;
 text-align: Center;
 top: -10px;
 width: 24px;
 text-decoration: None;
 font-weight: Bold;
 border-radius: 12px;
 box-shadow: 1px 1px 3px #000000;
}

.close:hover {
 background-color: #00D9FF;
}
</style>

In addition, it opens by itself after 500 ms
Code: [Select]
<script>
setTimeout(function() {
 window.location.href="#openModal";

}, 500);
</script>

and the actual code in <body>
Code: [Select]
<div id="openModal" class="modalDialog">

<p>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="login-overlay">

<style>
.login-overlay {
  position: fixed;
  width: 160px;
  height: 50px;
  top: 9%;
  left: 20%;
  margin-top: -100px;
  margin-left: -150px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
    }

.control-group {
  width: 560px;
  height: 45px;
  top: 1%;
  left: 10%;
  margin-top: -100px;
  margin-left: -150px;
  padding: 8px;
  font-family: 'Open Sans', sans-serif;
    }


</style>

    <div id="login-overlay" class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <a href="#close" title="Schließen" class="close">X</a>
              <h4 class="modal-title" id="myModalLabel">Wytery.com</h4>
          </div>
          <div class="modal-body">
              <div class="row">
                  <div class="col-xs-6">
                      <div class="well">
                          <form> <div class="form-container form-horizontal form-container-box">
    <div class="header">
        <h1 style="font-size:15px"><?php _e('Access to your account''sigma'); ?></h1>
    </div>
    <div class="resp-wrapper">
        <form action="<?php echo osc_base_url(true); ?>" method="post" >
            <input type="hidden" name="page" value="login" />
            <input type="hidden" name="action" value="login_post" />
<p style="font-size: 10px">
            <div class="control-group">
                <label class="control-label" for="email"><?php _e('E-mail''sigma'); ?></label>
                <div class="controls">
                    <?php UserForm::email_login_text(); ?>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="password"><?php _e('Password''sigma'); ?></label>
                <div class="controls">
                    <?php UserForm::password_login_text(); ?>
                </div>
            </div>
</p>
            <div class="control-group remember">
                <div class="controls checkbox">
                    <?php UserForm::rememberme_login_checkbox();?> <label for="remember"><?php _e('Remember me''sigma'); ?></label>
                </div>
            </div>

            <div class="control-group butt">
                <div class="controls">
                    <button type="submit" class="btn btn-primary"><?php _e("Log in"'sigma');?></button>
                </div>
            </div>
<?php osc_run_hook('user_login_form'); ?>
<div class="control-group"><?php osc_show_recaptcha('login'); ?></div>
            <div class="control-group act">
               
                <a href="<?php echo osc_recover_user_password_url(); ?>" class="lg"><?php _e("Forgot password?"'sigma'); ?></a>
            </div>
       
    </div>
</div>
                          </form>
                      </div>
                  </div>
                  <div class="col-xs-6">
                      <p class="lead">Willkommen bei Wytery <span class="text-success">Melde dich hier an,
                                        oder erstelle ein neues Konto, damit du:</span></p>
                      <ul class="list-unstyled" style="line-height: 2">
                          <li><span class="fa fa-check text-success"></span> Nachrichten senden und empfangen kannst</li>
                          <li><span class="fa fa-check text-success"></span> Eigene Anzeigen aufgeben kannst</li>
                          <li><span class="fa fa-check text-success"></span> Für dich interessante Anzeigen siehst</li>
                      </ul>
                      <p><a href="https://haushaltgeraete-chemnitz.com/de/user/register" class="btn btn-info btn-block">Registrieren Sie sich jetzt!</a></p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
</p>
</div>

now it could also be closed with the following code.
Code: [Select]
<a href="#close" title="Schließen" class="close">X</a>
So far so good, but now the following problem arises, that the overlay opens again with every page that I open, which is bad, how could this be solved?
The solution was then simple, you delete the whole thing from header.php and put the whole thing under the last line in main.php and look there it is only displayed on the start page. This option with the login overlay could be installed in the future.

« Last Edit: June 11, 2023, 01:20:19 PM by Roberto Klapper »