Используйте html-ссылку, чтобы открыть модальный javascript

ProgramBox

Используйте html-ссылку, чтобы открыть модальный javascript

Post author:admin
Запись опубликована:23 апреля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Я хочу открывать модальную версию каждый раз, когда я нажимаю на HTML-ссылку. В моей панели навигации у меня есть ссылка под названием «правила», где написаны все правила веб-сайтов. Каждый раз, когда кто-то нажимает на ссылку, я хочу, чтобы она открывала модальный javascript. С низким уровнем знаний javascript я лично не в состоянии создать что-то настолько простое, как это, без проблем.

Вот модальный скрипт и HTML:

 <div class="modal-background">
<form action="/etc/set_cookie.php" method="post">
  <div id="modal">
    <div class="modalconent tabs">
        <fieldset>
        <span class="close">×</span>
          <h2 class="fs-title">Cookies</h2>
          <h3 class="fs-subtitle">We use cookies to improve your experience</h3>
             <iframe style="width:100%; height:80px;" src="/etc/txt/cookies.php" ></iframe><br />
           <input type="submit" name="cookie" value="Accept" id="button" class="btn fr" style="width:180px; padding:10px;" />
        </fieldset>
    </div>
  </div>
</form>
</div>


<script>
window.onload = function () {
    document.getElementById('button').onclick = function () {
        document.getElementById('modal').style.display = "none"
    };
};

$(".modal-background, .modal-close").on("click", function(){
  $(".modal-container, .modal-background").hide();
});


// Get the modal
var modal = document.getElementById('modal');

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

// 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>

Я хочу, чтобы вызов ссылки открывал скрипт, который находится в другой папке, при каждом его нажатии. Все, что я видел в Интернете, это кнопки с этой функцией, но поскольку я не силен в javascript, я не могу переписать его для работы с моим модальным скриптом.

Ответ №1:

Для общей модальной информации вы получите это из http://www.w3schools.com/howto/howto_css_modals.asp

 // 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";
    }
}

Однако, если вы используете Jquery (а из вашего кода вы используете), тогда у вас есть кое-что попроще:
Теперь, что вы можете сделать, это присвоить ID вашей ссылке и сделать это:

  $("#YourIDHereLink").on("click", function ()
    {
        $("#Modal").css("display", "block");  
}

Где, если вы хотите скрыть это, замените блок на «none»

В целом я рекомендую 2-й подход

1. та же проблема, что и в ответе выше, модальная загрузка сразу и функции для скрытия модального не работают

2. вы пробовали приведенный ниже код? Попробуйте заменить ее на «none» вместо «block»

Ответ №2:

Чтобы вызвать функцию javascript с использованием ссылки, просто сделайте это следующим образом:

 <a href="javascript:yourfunction();">Link to Javascript function</a>

Просто убедитесь, что файл, в котором находится ваша функция javascript, связан в заголовке html.

1. Тогда я просто даю скрипту function yourfunction() { the rest of the code } ?

2. Я пытался сделать это сейчас, но, похоже, модальная загрузка при обновлении и ни один из методов закрытия не сработал

3. не могли бы вы описать свою проблему в jsfiddle? это сделало бы все намного проще.

4. jsfiddle.net/bkbox4md как я писал в hmtl, речь идет о 2 страницах. один с навигационной панелью, где я получил ссылку, а второй со скриптом и модальным html

Ответ №3:

ModaliseJS, может сделать свое дело.

HTML: Я только что добавил класс «confirm» и немного JS.

ModaliseJS закроет модальный режим, когда вы нажмете на любой элемент в модальном режиме с классами .close , .confirm , .cancel , запускающими события onShow , onHide , onCancel

 <!DOCTYPE html>

<html>

<head>
  <title>Modal example</title>
  <script src="js/modalise.js" type="text/javascript">
  </script>
  <script src="app.js" type="text/javascript">
  </script>
</head>

<body>
  <h1>Example modal 1</h1>
  <button id="openModal">Show the modal</button>
  <div class="modal-background">
    <form action="/etc/set_cookie.php" method="post">
      <div id="modal">
        <div class="modalconent tabs">
          <fieldset>
            <span class="close">×</span>
            <h2 class="fs-title">Cookies</h2>
            <h3 class="fs-subtitle">We use cookies to improve your experience</h3>
            <iframe style="width:100%; height:80px;" src="/etc/txt/cookies.php"></iframe>
            <br />
            <input type="submit" name="cookie" value="Accept" id="button" class="btn fr confirm" style="width:180px; padding:10px;" />
          </fieldset>
        </div>
      </div>
    </form>
  </div>
  <script>
    var myModal = {}

    window.onload = function() {
      // It is one of the button Modalise will attach the Show event.
      // Note that you can use Modalise without the events, by omitting the .attach() function.
      // Then, you can use show() or hide() to use it manually without overload. 
      var btnOpen = document.getElementById('openModal');

      // Modalise(id, options);
      myModal = new Modalise('exampleModal', {
          btnsOpen: [btnOpen]
        })
        .attach()
        .on('onShow', console.log)
        .on('onConfirm', console.log)
        .on('onHide', console.log);

    }
  </script>
</body>

</html>