HTML Модальный режим не открывается - PullRequest
Новая
       10

HTML Модальный режим не открывается

0 голосов
/ 13 июля 2020

В настоящее время я пытаюсь заставить простую модальную программу работать с HTML, но у меня возникли проблемы. Я считаю, что это могло быть из-за <div> мест размещения, которые у меня есть, но я не уверен. Может кто-нибудь, пожалуйста, взгляните и дайте мне знать, что я здесь делаю не так?

Вот код, который я использую: 

<style type="text/css">
    .cdynamic-template h2 {
        font-size: 24px;
        font-weight: 450;
        color: "[theme:neutralPrimary, default:#323130]";
    }

    .cdynamic-template .cdynamic-items .cdynamic-item {
        background: "[theme:bodyBackground, default: #fff]";
        border: 1px solid "[theme:neutralLight, default: #edebe9]";
        //box-shadow: 0px 0px 6px #bfbebe;
        margin-bottom: 15px;
    }

    .cdynamic-template .cdynamic-items .cdynamic-item h3 {
        background: "[theme:accentButtonBackground, default:#0078d4]";
        color: "[theme:accentButtonText, default: #fff]";
        padding: 5px 5px 7px 10px;
        margin: 0px;
        background-color: #3a4678;
    }

    .cdynamic-template .cdynamic-items .cdynamic-item .cdynamic-item-fields {
        padding: 10px;
    }

    .cdynamic-template .cdynamic-items .cdynamic-item .cdynamic-item-fields span {
        display: block;
        font-size: 14px;
    }

    .cdynamic-item {
        float: left;
        width: 325px;
        height: 200px;
    }

    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        /* Could be more or less, depending on screen size */
    }

    /* The Close Button */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>

 <!-- The Modal -->
<div id="myModal" class="modal">
 <!-- Modal content -->
<div class="modal-content">
     <span class="close">&times;</span>
     <p>Some text in the Modal..</p>
</div>
</div>           
<div class="cdynamic-template">
    <h2>Most Recent Creatives
        <br><a href=https://ewscripps.sharepoint.com/sites/LighthouseIdeas/SitePages/Creatives.aspx>See All...</a>
    </h2>
    <div class="cdynamic-items">
        {{#each items}}
        <div class="cdynamic-item">
            <h3>{{Title.textValue}}</h3>
            <div class="cimage">
                <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAEYklEQVRoge3Y64tUdRzH8ffvzM7e15ldM9JtvIURQRAUhQRlSkYQIT0RFCLE/gfRQBFJicgHEmSXJ0E+CYKCJFPZjTKjjKB6EOSNzRtedkd3ZndmZ87304NzZtzx7Obcthac75OZc85vfr/X53x/h2EGWtWqVrWqVfdyuWoGXXtlS1+ny6ccSjnZIJAyGMQ0ACSRkhJJUB8ijgSoW6IDCcGkk3ISgOWRGwfSyNISaYeuSbqMMeLwLxR8XcxZ30jq5GeTdQW4+fKmVTFPW3FuPbACSAAEMJAEAhBI4enwXIAPX4LxlWNmOjfL59ANSWfw9bW18f6i745cvmuAzIZNryPeA7orLvzXeClcqzxm1MxeW/TTsa9mDZDZsHkd0hEgNs/wKJgj63msHjh57PcSzat0as88xoPo8Yv25owdmHh184Pma6SiK/MLX7qey/Ra/4rh4VxFB8zXI/Xhw/klCjKKZnOJB9TZd8tWlJjlAM6xsr47H1zL+kUmn3ic7GOPMl4sYGZzgQ+OLfZwido2zbyynjtfep8v+izfvR0Xj5M+cpyxAwfpyU7S7rzm4iV8WDVzB2rCV24RQ7h4HIDki+tIfXKQ/Oonw26oafjwOBoAsyX14stjplXbQD+pt3ayYNc2xro6yMtvDl7gUCoSQHIDDeFVGaBUibXPsuzTD5la/VTQjfLc9eGRwFgUDYCSzcZXdGPfLhK7tzPW3UnO/PrxCOHfFwmA6GkIf5cQAIl1z7H80McUnnma8WIRk9WOl8BcbzQAam8EX4UfCLqx9O3dJPfsIN3TRcGsNnywdmc0gNTeGL7KBGElXnieZYc+ItvdjWrBB9eiARrG1+a/XbXjARUiAUBTDeGr3UNhpY8OcX7jFrozWVwt+OA4XZqn/E2MmCJsTX346gIUb4xyce+7aOh7Ep6H56gNH6w/UwBlgQX14qtpQProEFf37qd3PEO7F6uYowY8km5FA8CYpMV14/8lQPmuD5+g3/NwuEbwII1FAkg2WkbUjJ9dnz46xNV9++kdz9LhxWp/YKP4WbaQ6RLO1Y+/I0T5rn97gn4vhodrEh6cuBIJ4PDOSfX/GEFCUwVce5yxw99w/Z0D9GQn6PDabgOagEfCdzoTCWDOP4uV9mZteEl0eY6/t+1EuTw69StJz8PDazpeCK/I2Rm2UOws+HXhkehybRR/OIUQcS9WCWoiHgmTK3eg/EXmF/VnuFrN+GBfijYH8fBjc4VH5CZi6fORAAuHP78A/FgP/o4F5hKPM32x6vTpfCRAQNYOieJ8xSNlnFfcM91cEaD/+JdDiK0YE/MOb7rhYxsfOPPbH9PNM/65m1770kNm3huYW49sJZD4n/CjGH85OBwz74P7z/985U5rVX+vX12zpjfmdy3F/EH53qBzWirZYtBCRD+mhExJnLoQPSGoE9EV4ick5cOHPeNLk05K49xNZ5Y27Dqmy8iNOHTBsItkGFly6ZeJanytalWrWtWqe7f+AVrzIKbgsx9BAAAAAElFTkSuQmCC">
            </div>
            <div class="cdynamic-item-fields">
                <!-- Trigger/Open The Modal -->
                <button id="myBtn">Open Modal</button>
                <span class='cms-DetailsRow-cell'><strong>Industry: </strong>{{Industry.textValue}}</span>
                <span class='cms-DetailsRow-cell'><strong>Description: </strong>{{Description.textValue}}</span>
                <span class='cms-DetailsRow-cell'><strong>Video Type: </strong>{{VideoType.textValue}}</span>
            </div>
        </div>
        {{/each}}
    </div>
</div>

           

<script>
    // Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Любая помощь в правильном направлении будет очень признательна ! Спасибо!

1 Ответ

0 голосов
/ 14 июля 2020

У вас есть ошибка комментария для CSS CSS использует / * * / (комментарии блока), а не // 

//box-shadow: 0px 0px 6px #bfbebe;

Проверьте эту строку, замените ее на 

/*box-shadow: 0px 0px 6px #bfbebe;*/

И все будет нормально работать

...