Блог

Главная - Вопросы по программированию - Как перенести текстовое поле в модальный диалог?

Как перенести текстовое поле в модальный диалог?

#javascript #html #modal-dialog #twitter-bootstrap #delicious-api

#javascript #HTML #modal-dialog #twitter-bootstrap #delicious-api

Вопрос:

Я пытаюсь добавить функциональность ссылки на свой сайт. Для этого я использую модальный плагин из Twitter Boostrap JS. На главной странице нужно заполнить только поле «ссылка», когда пользователь нажимает кнопку «добавить ссылку», появляется модальное поле, и пользователь видит полную форму для заполнения: ссылка, заголовок, теги. Однако я хочу, чтобы поле ссылки было предварительно заполнено значением из предыдущего шага. Это похоже на то, что происходит, когда вы «сохраняете ссылку» на delicious.com .

Однако проблема в том, что когда я вставляю javascript в модальный диалог, модальный диалог перестает работать. Есть идеи, как обойти эту проблему? Большое вам спасибо!

 <html>
<head>
  <title>Example</title>
  <link rel="stylesheet" href="scripts/bootstrap.min.css">
  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <!-- The Modal Dialog  -->
  <div id="modal-from-dom" class="modal hide fade">             
    <div class="modal-body">
        <form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>
                Peter

                <script type="text/javascript">
                    var linkURL = $('#linkURL').val();
                    //document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>");
                    document.write(linkURL);
                </script>


                <button type='submit' class='btn'>Add Link</button>
        </form>
    </div>
    </div>
  </div>
  <div class="container">
    <div class="wall-post">
        <textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
        <button data-controls-modal="modal-from-dom" data-backdrop="static" class="btn">Add Link</button>

    </div>
  </div>
  <script src="scripts/jquery.min.js"></script>
  <script src="scripts/bootstrap-modal.js"></script>
</body>

Ответ №1:

Есть пара мелочей, мешающих вашему сценарию работать Arman.

Во-первых, вам нужно загрузить свои скрипты jquery и bootstrap в заголовок. Браузер интерпретирует страницу по мере ее загрузки, и когда браузер нажимает бит с надписью $(«#linkURL»), он не знает, что с ним делать.

Второй бит заключается в том, что вы можете узнать только содержимое, которое пользователь ввел в поле LinkURL, когда они нажимают кнопку «Добавить ссылку». Таким образом, вы можете действительно заполнить модальное поле только после этого.

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

Если вы соберете все это вместе, вы получите следующее :

 <html>
    <head>
        <title>Example</title>
        <script src="scripts/jquery.min.js" type="text/javascript"></script>
        <script src="scripts/bootstrap-modal.js" type="text/javascript"></script>
        <link rel="stylesheet" href="scripts/bootstrap.min.css">
        <link rel="stylesheet" href="main.css">

        <script type="text/javascript">

            $(document).ready(function(){
                $('#modal-from-dom').bind('show',function(){
                    $(".modal-body").html($("#linkURL").val());
                });
            });

        </script>
    </head>
    <body>
        <div id="modal-from-dom" class="modal hide fade">
            <div class="modal-header">
                <a href="#" class="close">amp;times;</a>
                <h3>Add Link</h3>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <a href="#" class="btn primary">Add Link</a>
            </div>
        </div>
        <textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
        <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button>
    </body>
  </html>

Тогда вам просто нужно немного изменить содержимое, и вы должны быть правы!

Комментарии:

1. Большое спасибо, Джо! Единственное, что я хочу показать форму (с 3 полями: заголовок, URL, теги) в модальном с уже заполненным полем url. Есть ли способ использовать события для установки входных значений?

Метки: