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

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

0 голосов
/ 21 октября 2011

Я пытаюсь добавить ссылку на мой сайт.Для этого я использую Модальный плагин от 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 Ответ

4 голосов
/ 21 октября 2011

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

Во-первых, вам нужно загрузить свои jquery и скрипты начальной загрузки в заголовок.Браузер интерпретирует страницу при загрузке, и когда браузер нажимает на бит, который говорит $ ("# 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">&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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...